/* ============================================================
   soporte.css — Portal público de soporte
   Basado en el diseño de tagos.es
   ============================================================ */

   *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

   :root {
       --bg:           #f5f4f1;
       --surface:      #ffffff;
       --surface2:     #efede8;
       --border:       rgba(0,0,0,0.09);
       --border2:      rgba(0,0,0,0.15);
       --text:         #181714;
       --muted:        #6b6a65;
       --hint:         #9e9d97;
       --accent:       #f0c800;
       --accent-bg:    #fdf8d8;
       --accent-border:#e8d84a;
       --accent-d:     #c9a800;
       --amber:        #854F0B;
       --amber-bg:     #FAEEDA;
       --green:        #0F6E56;
       --green-bg:     #E1F5EE;
       --blue:         #185FA5;
       --blue-bg:      #E6F1FB;
       --red:          #A32D2D;
       --red-bg:       #FCEBEB;
       --radius:       10px;
       --radius-lg:    14px;
       --font-h:       'Nunito', sans-serif;
       --font-b:       'DM Sans', sans-serif;
   }
   
   body {
       font-family: var(--font-b);
       background: var(--bg);
       color: var(--text);
       font-size: 15px;
       line-height: 1.6;
   }
   
   /* ── Header ─────────────────────────────────────────────────── */
   .site-header {
       background: var(--surface);
       border-bottom: 1px solid var(--border);
       position: sticky; top: 0; z-index: 100;
       padding: 0 1.5rem;
   }
   .site-header .container {
       display: flex; align-items: center; gap: 1.5rem;
       max-width: 1100px; margin: 0 auto; height: 60px;
   }
   .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
   .logo img { display: block; }
   .logo-badge {
       background: var(--accent-bg);
       border: 1px solid var(--accent-border);
       color: var(--amber);
       font-size: 11px; font-weight: 700;
       padding: 2px 10px; border-radius: 20px;
       font-family: var(--font-h); letter-spacing: .5px;
       text-transform: uppercase;
   }
   .header-nav {
       display: flex; align-items: center; gap: 20px;
       margin-left: auto; font-size: 14px;
   }
   .header-nav a { color: var(--muted); text-decoration: none; font-weight: 500; }
   .header-nav a:hover { color: var(--text); }
   .header-user { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
   .btn-logout { color: var(--red); font-size: 13px; text-decoration: none; font-weight: 500; }
   .btn-link { background: none; border: none; cursor: pointer; font-family: inherit; font-size: 14px; color: var(--blue); font-weight: 500; padding: 0; }
   
   /* ── Botones ─────────────────────────────────────────────────── */
   .btn {
       display: inline-flex; align-items: center; gap: 7px;
       padding: 8px 18px; border-radius: 8px;
       font-size: 14px; font-weight: 600; font-family: var(--font-b);
       cursor: pointer; border: 1px solid var(--border2);
       background: var(--surface); color: var(--muted);
       text-decoration: none; transition: all .15s;
   }
   .btn:hover { background: var(--surface2); color: var(--text); }
   .btn-primary { background: var(--accent); color: var(--text); border-color: var(--accent-d); }
   .btn-primary:hover { background: var(--accent-d); }
   .btn-secondary { background: var(--surface); color: var(--muted); border-color: var(--border2); }
   .btn-lg { padding: 11px 24px; font-size: 15px; }
   
   /* ── Container ───────────────────────────────────────────────── */
   .container { max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; }
   .container-narrow { max-width: 760px; margin: 0 auto; padding: 0 1.5rem; }
   
   /* ── Hero ────────────────────────────────────────────────────── */
   .hero-soporte {
       background: linear-gradient(160deg, var(--accent-bg) 0%, var(--bg) 60%);
       border-bottom: 1px solid var(--border);
       padding: 64px 0 52px;
       text-align: center;
   }
   .hero-badge {
       display: inline-block;
       background: var(--accent-bg); border: 1px solid var(--accent-border);
       color: var(--amber); font-size: 11px; font-weight: 700;
       letter-spacing: .8px; text-transform: uppercase;
       padding: 4px 14px; border-radius: 20px; margin-bottom: 20px;
       font-family: var(--font-h);
   }
   .hero-soporte h1 {
       font-family: var(--font-h);
       font-size: clamp(28px, 4vw, 46px);
       font-weight: 900; line-height: 1.1;
       color: var(--text); margin-bottom: 14px;
   }
   .hero-soporte p { font-size: 17px; color: var(--muted); margin-bottom: 24px; }
   .hero-trust { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: var(--hint); }
   
   /* ── Login panel ─────────────────────────────────────────────── */
   .login-panel { background: var(--surface); border-bottom: 1px solid var(--border); padding: 20px 0; }
   .login-box { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 24px; }
   .login-box h3 { font-size: 15px; font-weight: 700; margin-bottom: 4px; font-family: var(--font-h); }
   .login-box p { font-size: 13px; color: var(--muted); margin-bottom: 14px; }
   .login-form .form-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
   .login-form .field { flex: 1; min-width: 160px; margin-bottom: 0; }
   .login-form .field label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; }
   .login-form .field input { height: 38px; padding-top: 0; padding-bottom: 0; }
   .login-form .btn { height: 38px; padding-top: 0; padding-bottom: 0; white-space: nowrap; flex-shrink: 0; }
   
   /* ── Formulario ──────────────────────────────────────────────── */
   .section-form { padding: 48px 0 64px; }
   .section-form .container { display: grid; grid-template-columns: 1fr 280px; gap: 32px; align-items: start; }
   
   .form-card {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius-lg);
       overflow: hidden;
   }
   .form-card-header {
       display: flex; align-items: center; gap: 10px;
       padding: 16px 24px;
       background: var(--surface2); border-bottom: 1px solid var(--border);
       font-size: 14px; font-weight: 600; color: var(--text);
   }
   .form-card form { padding: 24px; }
   
   .form-section-title {
       font-size: 11px; font-weight: 700; color: var(--hint);
       text-transform: uppercase; letter-spacing: .07em;
       margin-bottom: 12px;
   }
   .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
   
   .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
   .field label { font-size: 13px; font-weight: 500; color: var(--text); }
   .field-hint { font-size: 11px; color: var(--hint); font-weight: 400; }
   .req { color: var(--red); }
   
   .field input[type="text"],
   .field input[type="email"],
   .field input[type="password"],
   .field textarea {
       padding: 9px 12px;
       border: 1px solid var(--border2);
       border-radius: 8px;
       font-size: 14px; font-family: var(--font-b);
       background: var(--bg); color: var(--text);
       outline: none; transition: border-color .15s, box-shadow .15s;
       width: 100%;
   }
   .field input:focus, .field textarea:focus {
       border-color: var(--accent-d);
       box-shadow: 0 0 0 3px rgba(240,200,0,0.12);
       background: var(--surface);
   }
   .field input[readonly] { opacity: .7; cursor: default; }
   .field textarea { resize: vertical; min-height: 120px; }
   
   /* Prioridad */
   .radio-group { display: flex; gap: 8px; flex-wrap: wrap; }
   .radio-opt { display: none; }
   .radio-opt input { display: none; }
   .radio-pill {
       display: inline-block; padding: 6px 14px; border-radius: 20px;
       font-size: 13px; font-weight: 600; cursor: pointer;
       border: 1.5px solid transparent; transition: all .15s;
   }
   .radio-opt { display: flex; }
   .radio-pill.baja   { background: var(--green-bg);  color: var(--green); border-color: rgba(15,110,86,.2); }
   .radio-pill.media  { background: var(--amber-bg);  color: var(--amber); border-color: rgba(133,79,11,.2); }
   .radio-pill.alta   { background: var(--red-bg);    color: var(--red);   border-color: rgba(163,45,45,.2); }
   .radio-opt input:checked + .radio-pill { box-shadow: 0 0 0 2px currentColor; }
   
   /* File drop */
   .file-drop {
       display: flex; align-items: center; gap: 10px;
       padding: 10px 14px;
       border: 1.5px dashed var(--border2); border-radius: 8px;
       cursor: pointer; font-size: 13px; color: var(--muted);
       transition: background .15s; background: var(--bg);
       position: relative;
   }
   .file-drop:hover, .file-drop.dragging { background: var(--surface2); border-color: var(--accent-d); }
   .file-drop input[type="file"] { position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer; left:0; top:0; }
   
   /* ── Aside ───────────────────────────────────────────────────── */
   .form-aside { display: flex; flex-direction: column; gap: 12px; }
   .aside-card {
       background: var(--surface); border: 1px solid var(--border);
       border-radius: var(--radius); padding: 18px;
   }
   .aside-card-cta { border-color: var(--accent-border); background: var(--accent-bg); }
   .aside-icon { font-size: 22px; margin-bottom: 8px; }
   .aside-card h4 { font-size: 14px; font-weight: 700; font-family: var(--font-h); margin-bottom: 6px; }
   .aside-card p { font-size: 13px; color: var(--muted); line-height: 1.5; }
   
   /* ── Alertas ─────────────────────────────────────────────────── */
   .alert {
       padding: 12px 16px; border-radius: 8px; font-size: 13px;
       border: 1px solid transparent; margin-bottom: 16px;
   }
   .alert-ok   { background: var(--green-bg); color: var(--green); border-color: rgba(15,110,86,.2); }
   .alert-err  { background: var(--red-bg);   color: var(--red);   border-color: rgba(163,45,45,.2); }
   .alert-info { background: var(--blue-bg);  color: var(--blue);  border-color: rgba(24,95,165,.2); }
   .alert-warn { background: var(--amber-bg); color: var(--amber); border-color: rgba(133,79,11,.2); }
   
   /* ── Badges ──────────────────────────────────────────────────── */
   .badge {
       display: inline-block; padding: 3px 10px; border-radius: 20px;
       font-size: 11px; font-weight: 700; font-family: var(--font-h);
       letter-spacing: .3px;
   }
   .est-abierto  { background: var(--blue-bg);  color: var(--blue); }
   .est-proceso  { background: var(--amber-bg); color: var(--amber); }
   .est-espera   { background: var(--accent-bg);color: var(--accent-d); }
   .est-resuelto { background: var(--green-bg); color: var(--green); }
   .est-cerrado  { background: var(--surface2); color: var(--hint); }
   .prio-baja    { background: var(--green-bg); color: var(--green); }
   .prio-media   { background: var(--amber-bg); color: var(--amber); }
   .prio-alta    { background: var(--red-bg);   color: var(--red); }
   
   /* ── Vista ticket ────────────────────────────────────────────── */
   .section-ticket { padding: 40px 0 64px; }
   .ticket-header {
       background: var(--surface); border: 1px solid var(--border);
       border-radius: var(--radius-lg); padding: 24px 28px; margin-bottom: 24px;
   }
   .ticket-header-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
   .ticket-ref { font-family: monospace; font-size: 13px; color: var(--hint); }
   .ticket-asunto { font-family: var(--font-h); font-size: 22px; font-weight: 800; margin-bottom: 10px; }
   .ticket-meta { font-size: 13px; color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; }
   
   /* Hilo */
   .hilo { display: flex; flex-direction: column; gap: 16px; margin-bottom: 28px; }
   .mensaje { display: flex; gap: 14px; align-items: flex-start; }
   .mensaje-agente { flex-direction: row-reverse; }
   .mensaje-avatar {
       width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
       display: flex; align-items: center; justify-content: center;
       font-family: var(--font-h); font-size: 15px; font-weight: 800;
   }
   .cliente-avatar { background: var(--surface2); color: var(--muted); border: 1px solid var(--border2); }
   .agente-avatar  { background: var(--accent);   color: var(--text); }
   
   .mensaje-bubble {
       flex: 1; background: var(--surface); border: 1px solid var(--border);
       border-radius: var(--radius-lg); padding: 16px 20px;
   }
   .mensaje-agente .mensaje-bubble { background: var(--accent-bg); border-color: var(--accent-border); }
   .mensaje-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
   .mensaje-head strong { font-size: 14px; font-weight: 600; }
   .mensaje-fecha { font-size: 12px; color: var(--hint); }
   .mensaje-body { font-size: 14px; color: var(--text); line-height: 1.7; }
   
   .adjuntos { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
   .adjunto-link {
       display: inline-flex; align-items: center; gap: 6px;
       font-size: 12px; color: var(--blue); text-decoration: none;
       background: var(--blue-bg); padding: 4px 10px; border-radius: 20px;
   }
   .adjunto-link:hover { text-decoration: underline; }
   .adjunto-link span { color: var(--hint); }
   
   /* Reply box */
   .reply-box {
       background: var(--surface); border: 1px solid var(--border);
       border-radius: var(--radius-lg); padding: 24px 28px;
   }
   .reply-box h3 { font-family: var(--font-h); font-size: 16px; font-weight: 700; margin-bottom: 16px; }
   
   /* ── Mis tickets ─────────────────────────────────────────────── */
   .page-title-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
   .page-title-row h1 { font-family: var(--font-h); font-size: 24px; font-weight: 800; }
   
   .tickets-list { display: flex; flex-direction: column; gap: 8px; }
   .ticket-row {
       display: flex; align-items: center; justify-content: space-between; gap: 16px;
       background: var(--surface); border: 1px solid var(--border);
       border-radius: var(--radius); padding: 14px 18px;
       text-decoration: none; color: var(--text);
       transition: border-color .15s, box-shadow .15s;
   }
   .ticket-row:hover { border-color: var(--accent-d); box-shadow: 0 2px 8px rgba(0,0,0,.06); }
   .ticket-row-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
   .ticket-ref-sm { font-family: monospace; font-size: 12px; color: var(--hint); white-space: nowrap; }
   .ticket-asunto-sm { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
   .ticket-row-meta { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
   .ticket-fecha { font-size: 12px; color: var(--hint); }
   
   /* Empty state */
   .empty-state { text-align: center; padding: 64px 24px; }
   .empty-icon { font-size: 48px; margin-bottom: 16px; }
   .empty-state h3 { font-family: var(--font-h); font-size: 20px; font-weight: 800; margin-bottom: 8px; }
   .empty-state p { font-size: 15px; color: var(--muted); }
   
   /* ── Footer ──────────────────────────────────────────────────── */
   .site-footer {
       background: var(--surface2); border-top: 1px solid var(--border);
       padding: 20px 0;
   }
   .footer-inner {
       display: flex; align-items: center; justify-content: space-between;
       font-size: 13px; color: var(--hint);
   }
   .footer-inner a { color: var(--hint); text-decoration: none; }
   .footer-inner a:hover { color: var(--text); }
   
   /* ── Responsive ──────────────────────────────────────────────── */
   @media (max-width: 860px) {
       .section-form .container { grid-template-columns: 1fr; }
       .form-aside { flex-direction: row; flex-wrap: wrap; }
       .aside-card { flex: 1; min-width: 220px; }
   }
   @media (max-width: 600px) {
       .form-grid-2 { grid-template-columns: 1fr; }
       .ticket-row { flex-direction: column; align-items: flex-start; gap: 8px; }
       .header-nav { gap: 12px; font-size: 13px; }
   }