/* Portal de clientes upCloud — mismo sistema modular institucional que el
   panel de administración, en densidad "portal": menos datos por pantalla,
   más orientación y confianza. Comparte tokens con admin/assets/admin.css
   y con assets/css/site.css. */
:root{
  --brand:#0a1b8f;--brand-deep:#0b1330;--accent:#087cff;--accent-soft:#eef3ff;
  --coral:#ff6b4a;--mint:#16a67a;--amber:#8b5a00;--amber-soft:#fff3d6;
  --ink:#0b1330;--muted:#596681;--paper:#f5f7fc;--card:#fff;
  --line:#dce2f0;--line-strong:#c8d1e2;--radius:2px;
  --shadow:0 10px 28px rgba(10,27,143,.07);
  --display:'Aptos Display','Bahnschrift SemiCondensed','Arial Narrow',sans-serif;
  --font:'Aptos','Segoe UI',system-ui,sans-serif;--mono:'Cascadia Mono','Consolas',monospace;
}
*{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);font-size:15px;line-height:1.55;letter-spacing:-.006em}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
::selection{background:#cfe0ff;color:var(--brand-deep)}
:focus-visible{outline:3px solid var(--coral);outline-offset:2px}
form[aria-busy=true]{cursor:progress}
form[aria-busy=true] input,form[aria-busy=true] textarea,form[aria-busy=true] select{opacity:.7}
.client-spinner{width:15px;height:15px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:client-spin .65s linear infinite}
@keyframes client-spin{to{transform:rotate(360deg)}}
.client-wrap{width:min(1220px,calc(100% - 40px));margin-inline:auto}

/* ---------- Cabecera ---------- */
.client-header{position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line);background:rgba(251,251,254,.95);backdrop-filter:blur(16px)}
.client-nav{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.client-brand{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:800;color:var(--brand)}
.client-brand img{object-fit:contain}
.client-brand small{font:750 10px/1 var(--mono);text-transform:uppercase;letter-spacing:.13em;color:var(--accent)}
.client-nav nav{display:flex;align-items:center;gap:4px}
.client-nav nav a{padding:9px 13px;color:#4d5a74;font-weight:700}
.client-nav nav a:hover{background:var(--accent-soft);color:var(--brand)}
.client-nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;margin-left:4px;background:var(--coral);color:#fff;font-size:10.5px;font-weight:800;vertical-align:2px}

/* ---------- Contenido ---------- */
.client-main{min-height:calc(100vh - 160px);padding-block:44px 80px}
.client-welcome{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:34px;margin-bottom:24px;padding:clamp(28px,4vw,44px);border:1px solid var(--line-strong);background:linear-gradient(90deg,#fff 0,#fff 68%,var(--accent-soft) 68%)}
.client-welcome-copy{position:relative;z-index:1;min-width:0}
.client-welcome h1{margin:8px 0 10px;font:780 clamp(32px,5vw,52px)/1.05 var(--display);letter-spacing:-.03em;color:var(--brand)}
.client-welcome-copy>p:not(.client-kicker){max-width:680px;margin:0;color:var(--muted);font-size:16px}
.client-welcome>.client-button{position:relative;z-index:1;flex:none}
.client-session-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.client-session-meta span{min-width:180px;padding:11px 14px;border:1px solid var(--line-strong);background:rgba(255,255,255,.8)}
.client-session-meta small,.client-session-meta strong{display:block}
.client-session-meta small{margin-bottom:2px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.client-session-meta strong{font-size:12px}
.client-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.client-page-head h1{margin:4px 0 0;font:780 clamp(28px,5vw,44px)/1.08 var(--display);letter-spacing:-.03em;color:var(--brand)}
.client-kicker{margin:0;color:var(--accent);font:750 11px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.12em}
.client-alert{margin:0 0 24px;padding:13px 16px;border:1px solid;font-weight:650}
.client-alert.success{background:#e8fbf4;border-color:#b6ead8;color:#075f43}
.client-alert.error{background:#fff0ec;border-color:#ffcbbf;color:#8b2715}

/* ---------- Botones ---------- */
.client-button{min-height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;padding:11px 18px;background:var(--accent);color:#fff;font-weight:700;transition:background .16s,transform .16s}
.client-button:hover{background:var(--brand);transform:translateY(-1px)}
.client-button:active{transform:none}
.client-button.secondary{background:#fff;color:var(--brand);border-color:var(--line-strong)}
.client-button.small{min-height:34px;font-size:12px;padding:8px 12px}
.client-button.danger{background:#fff4f4;color:#9b2c19;border-color:#f1c6c8}
.client-button[disabled],.client-button.is-loading{opacity:.5;cursor:not-allowed;transform:none}

/* ---------- Paneles y grillas de panel ---------- */
.client-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:28px}
.client-stat{position:relative;overflow:hidden;padding:20px;border:1px solid var(--line);background:#fff;box-shadow:0 8px 24px rgba(11,19,48,.05)}
.client-stat::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:var(--accent)}
.client-stat span{display:block;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.07em}
.client-stat strong{display:block;margin-top:6px;font:760 27px/1 var(--display)}
.client-stat.compact strong{font-size:20px}
.client-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:22px}
.client-dashboard-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px;margin-bottom:22px;align-items:start}
.client-dashboard-grid>.span-8{grid-column:span 8}.client-dashboard-grid>.span-7{grid-column:span 7}
.client-dashboard-grid>.span-5{grid-column:span 5}.client-dashboard-grid>.span-4{grid-column:span 4}
.client-dashboard-grid .client-panel{margin:0}
.client-columns{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:22px;align-items:start;margin-bottom:22px}
.client-col{display:flex;flex-direction:column;gap:22px;min-width:0}
.client-columns .client-panel{margin:0}
.client-panel{background:#fff;border:1px solid var(--line);padding:clamp(20px,3vw,30px);box-shadow:var(--shadow);margin-bottom:22px}
.client-panel-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:20px}
.client-panel h2,.client-panel h3{margin:0;color:var(--brand-deep);letter-spacing:-.015em}
.client-panel h2{font:760 21px/1.2 var(--display)}
.client-panel h3{font-size:17px}
.client-muted{color:var(--muted)}
.client-empty{padding:30px;border:1px dashed var(--line-strong);text-align:center;color:var(--muted)}

/* ---------- Listas de tickets, proyectos, hitos ---------- */
.ticket-list,.project-list,.milestone-list{display:flex;flex-direction:column;gap:10px}
.ticket-row,.project-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;padding:16px 17px;border:1px solid var(--line);background:#fff;transition:border-color .15s,background .15s}
.ticket-row:hover,.project-row:hover{border-color:var(--accent);background:#fbfdff}
.ticket-row strong,.project-row strong{display:block;color:var(--brand-deep)}
.ticket-row p,.project-row p{margin:4px 0 0;color:var(--muted);font-size:13px}
.ticket-row.unread{border-left:4px solid var(--accent);background:#f5f9ff}
.client-unread-dot{display:inline-block;width:8px;height:8px;margin-right:2px;border-radius:50%;background:var(--coral);vertical-align:1px}
.client-new-pill{display:inline-block;padding:2px 8px;background:var(--coral);color:#fff;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;vertical-align:2px}
.ticket-meta{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:7px}
.status{display:inline-flex;padding:5px 9px;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;background:var(--accent-soft);color:var(--brand)}
.status.en_progreso,.status.en_curso{background:#e4f1ff;color:#075cae}
.status.esperando_cliente,.status.en_revision{background:var(--amber-soft);color:var(--amber)}
.status.resuelto,.status.completado{background:#e3f8ef;color:#087550}
.status.cerrado,.status.pausado{background:#eff1f5;color:#596174}
.status.urgente,.status.vencido,.status.suspendido{background:#fff0ec;color:#9b2c19}
.status.pagado,.status.activo{background:#e3f8ef;color:#087550}
.status.pendiente{background:var(--amber-soft);color:var(--amber)}
.status.anulado,.status.finalizado{background:#eff1f5;color:#596174}
.client-notice{padding:18px;border:1px solid var(--line-strong);border-left:4px solid var(--accent);background:#f7f9ff}
.client-notice.mantencion{border-left-color:var(--coral)}
.client-notice h3{margin:0 0 7px}
.client-notice p{margin:0;color:var(--muted);white-space:pre-wrap}
.client-notice p a{color:var(--brand);font-weight:700;text-decoration:underline}
.client-financial-summary{display:flex;flex-direction:column;gap:14px}
.financial-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.financial-row:last-child{border-bottom:0}
.financial-row p{margin:3px 0 0;color:var(--muted);font-size:12px}
.financial-row>strong{flex:none;font-size:15px}
.payment-mode{display:inline-flex;align-items:center;gap:7px;margin-top:8px;font-size:11px;font-weight:750;color:var(--muted)}
.payment-mode::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--mint)}
.payment-mode.manual::before{background:var(--amber)}.payment-mode.manual_sin_avisos::before{background:#8a93a8}
.service-category{display:inline-flex;padding:5px 8px;background:var(--accent-soft);color:#075cae;font-size:10px;font-weight:800;line-height:1.2}
.client-support-strip{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px;border:1px solid var(--line-strong);color:#fff;background:var(--brand-deep)}
.client-support-strip h2{margin:0 0 4px;font-size:20px}
.client-support-strip p{margin:0;color:#dce7ff}
.client-support-strip .client-button{background:#fff;color:var(--brand)}
.project-progress{display:block;width:100%;height:8px;margin-top:12px;border:0;background:#edf0f6;overflow:hidden;appearance:none}
.project-progress::-webkit-progress-bar{background:#edf0f6}
.project-progress::-webkit-progress-value{background:linear-gradient(90deg,var(--brand),var(--accent))}
.project-progress::-moz-progress-bar{background:linear-gradient(90deg,var(--brand),var(--accent))}
.milestone{display:grid;grid-template-columns:18px minmax(0,1fr) auto;gap:12px;align-items:start;padding:15px 0;border-bottom:1px solid var(--line)}
.milestone:last-child{border-bottom:0}
.milestone-dot{width:12px;height:12px;margin-top:5px;border:2px solid var(--accent);border-radius:50%}
.milestone.completed .milestone-dot{background:var(--mint);border-color:var(--mint)}
.milestone p{margin:3px 0 0;color:var(--muted);font-size:13px}
.milestone time{font-size:12px;color:var(--muted)}

/* ---------- Formularios y filtros ---------- */
.client-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.client-field{display:flex;flex-direction:column;gap:7px}
.client-field.full{grid-column:1/-1}
.client-field label{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:#4d5872}
.client-field input,.client-field textarea,.client-field select{width:100%;min-height:44px;padding:12px 13px;border:1px solid var(--line-strong);background:#fbfcff;outline:none;transition:border-color .16s,box-shadow .16s,background .16s}
.client-field input:hover,.client-field textarea:hover,.client-field select:hover{border-color:#a9b6cc}
.client-field textarea{min-height:130px;resize:vertical}
.client-field input:focus,.client-field textarea:focus,.client-field select:focus{background:#fff;border-color:var(--accent);box-shadow:0 0 0 3px rgba(8,124,255,.14)}
.client-field input[type=file]{padding:8px;border-style:dashed}
.client-muted.files-ready{color:#087550;font-weight:750}
.client-form-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px}
.client-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;padding:18px;margin-bottom:20px;border:1px solid var(--line);background:#f8faff}
.client-filters .client-form-actions{grid-column:1/-1;margin-top:2px}

/* ---------- Conversación de soporte ---------- */
.conversation{display:flex;flex-direction:column;gap:16px}
.message{position:relative;max-width:82%;padding:16px 18px;border:1px solid var(--line-strong);background:#f3f6fa;line-height:1.65}
.message.admin{margin-left:auto;background:var(--brand);color:#fff;border-color:var(--brand)}
.message p{margin:0;white-space:pre-wrap}
.message small{display:block;margin-top:8px;opacity:.65;font-size:11px}
.client-attachments{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13px}
.client-attachments a{color:inherit;font-weight:700;text-decoration:underline}
.message.admin .client-attachments li{padding:6px 8px;background:rgba(255,255,255,.12)}

/* ---------- Ingreso y privacidad ---------- */
.client-login-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:var(--paper)}
.client-login{width:min(100%,440px);padding:36px;background:#fff;border:1px solid var(--line);border-top:6px solid var(--brand)}
.client-login .client-brand{margin-bottom:28px}
.client-login h1{margin:0 0 10px;font:780 30px/1.1 var(--display);letter-spacing:-.03em;color:var(--brand)}
.client-login>p{margin:0 0 24px;color:var(--muted)}
.client-login form{display:flex;flex-direction:column;gap:16px}
.client-login .client-button{width:100%}
.client-login .client-login-help{margin:22px 0 0;font-size:13px}
.client-footer{border-top:1px solid var(--line);background:#fff}
.client-footer>div{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-size:13px}
.privacy-required{border-color:var(--accent);background:linear-gradient(90deg,#fff 0,#fff 70%,var(--accent-soft) 70%)}
.privacy-required h2{font-size:clamp(24px,4vw,36px)}
.privacy-choice{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:22px}
.privacy-choice.compact{margin-top:0}
.privacy-check{display:flex;align-items:flex-start;gap:11px;padding:13px 15px;border:1px solid var(--line);background:#fff}
.privacy-check.optional{background:#f8f9fd}
.privacy-check input{width:18px;height:18px;margin-top:2px;accent-color:var(--brand);flex:none}
.privacy-summary-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-bottom:22px}
.privacy-summary-grid .client-panel{margin-bottom:0}
.privacy-summary-grid h2{margin:5px 0 10px}
.privacy-summary-grid p{margin:0;color:var(--muted)}
.privacy-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:18px 0}
.privacy-detail-grid>div{padding:18px;border:1px solid var(--line);background:#f9faff}
.privacy-detail-grid h3{margin:0 0 7px}
.privacy-detail-grid p{margin:0;color:var(--muted)}
.privacy-request-list{display:flex;flex-direction:column;gap:12px}
.privacy-request-list article{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;padding:17px;border:1px solid var(--line)}
.privacy-request-list p{margin:4px 0 0;color:var(--muted);font-size:13px}
.privacy-request-list .privacy-response{grid-column:1/-1;padding-top:12px;border-top:1px solid var(--line);color:var(--ink);white-space:normal}
.client-secret-warning{padding:10px 12px;border:1px solid #f2b8a9;background:#fff2ee;color:#902f1c;font-size:12px;font-weight:750}

/* ---------- Adaptación a pantallas angostas ---------- */
@media(max-width:980px){
  .client-columns{grid-template-columns:1fr}
  .client-dashboard-grid>.span-8,.client-dashboard-grid>.span-7,.client-dashboard-grid>.span-5,.client-dashboard-grid>.span-4{grid-column:1/-1}
}
@media(max-width:860px){
  .client-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .client-grid{grid-template-columns:1fr}
  .client-welcome{align-items:flex-start;flex-direction:column}
  .client-welcome>.client-button{width:100%}
  .privacy-summary-grid,.privacy-detail-grid{grid-template-columns:1fr}
  .client-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .client-wrap{width:min(100% - 28px,1220px)}
  .client-nav{min-height:66px}
  .client-nav nav a:not(:last-child){display:none}
  .client-main{padding-block:32px 60px}
  .client-page-head{align-items:flex-start;flex-direction:column}
  .client-page-head .client-button{width:100%}
  .client-stats{grid-template-columns:1fr 1fr;gap:10px}
  .client-stat{padding:16px}.client-stat strong{font-size:24px}
  .client-form{grid-template-columns:1fr}
  .client-field.full,.client-form-actions{grid-column:auto}
  .client-form-actions .client-button{width:100%}
  .client-filters{grid-template-columns:1fr}
  .ticket-row,.project-row{grid-template-columns:1fr}
  .ticket-meta{justify-content:flex-start}
  .message{max-width:94%}
  .client-login{padding:28px 22px}
  .client-welcome{padding:24px 20px}
  .client-session-meta{display:grid;grid-template-columns:1fr;width:100%}
  .client-session-meta span{min-width:0}
  .client-support-strip{align-items:flex-start;flex-direction:column;padding:22px}
  .client-support-strip .client-button{width:100%}
  .client-footer>div{align-items:flex-start;flex-direction:column;justify-content:center;padding-block:18px}
  .privacy-request-list article{grid-template-columns:1fr}
  .privacy-request-list .privacy-response{grid-column:auto}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}