:root{
        --brand: #ff6b35;
        --brand-700:#e65f2f;
        --accent:#00a884;
        --action:#EC3035;
        --action-700:#c6282d;
        --bg:#ffffff;
        --text:#1f2937;
        --muted:#6b7280;
        --surface:#f7f7f8;
        --border:#e5e7eb;
        --border-strong:#d1d5db; /* un poco más visible */
        --radius:16px;
        --shadow:0 10px 20px rgba(0,0,0,.06);
      }
      *{box-sizing:border-box}
      html,body{height:100%}
      body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,Noto Sans,Ubuntu,Cantarell,'Fira Sans','Droid Sans',sans-serif;color:var(--text);background:linear-gradient(180deg,#fff 0%, #fff5f0 100%)}
      a{color:inherit;text-decoration:none}
      img{display:block;max-width:100%}

      .wrap{min-height:100%;display:grid;place-items:center;padding:24px}
      .card{width:min(100%, 440px);background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
      .brand{display:flex;gap:10px;align-items:center;justify-content:center;margin-bottom:6px}
      .brand .logo{border-radius:14px;overflow:hidden;box-shadow:var(--shadow);display:inline-block}
      .brand .logo img{display:block;height:auto;width:auto;max-width:100%}
      .brand .name{display:none}
      .muted{text-align:center;color:var(--muted);margin:0 0 14px}

      .tabs{display:flex;position:relative;border:1px solid var(--border);border-radius:12px;margin:10px 0 16px;background:#fff;overflow:hidden}
      /* Quitamos indicador superpuesto y coloreamos directamente la pestaña activa */
      .tab{flex:1;padding:.6rem .8rem;text-align:center;cursor:pointer;background:#fff;border:0;appearance:none;-webkit-appearance:none;outline:none;position:relative;border-radius:12px}
      .tab:hover{background:#f9fafb}
      .tab:active{background:var(--action-700); color:#fff}
      .tab:first-child{border-top-right-radius:0;border-bottom-right-radius:0}
      .tab:last-child{border-top-left-radius:0;border-bottom-left-radius:0}
      /* Sin separador visible entre tabs para evitar línea blanca */
      .tab + .tab{border-left:0}
      /* Activa: fondo rojo y texto blanco en el mismo botón */
      .tab[aria-selected="true"]{background:var(--action); color:#fff; font-weight:800}
      /* Enfoque accesible con anillo externo suave */
      .tab:focus-visible{box-shadow:0 0 0 3px rgba(255,107,53,.35)}

      form{display:grid;gap:.7rem}
      label{font-size:.95rem;color:#374151;text-align:center}
      .field{display:grid;gap:.35rem}
      .field input, .field select{width:100%;padding:.65rem .8rem;border:1.5px solid var(--border-strong);border-radius:12px;outline:none;background:#fff;background-clip:padding-box;transition:border-color .2s, box-shadow .2s, background-color .2s; text-align:center;}
      /* Centrar placeholders sin afectar colores */
      input::placeholder{ text-align:center; color:#9ca3af; }
      input::-webkit-input-placeholder{ text-align:center; }
      input::-moz-placeholder{ text-align:center; }
      input:-ms-input-placeholder{ text-align:center; }
      input::-ms-input-placeholder{ text-align:center; }
      /* Borde suave y realce de marca */
      .field input:hover, .field select:hover{border-color:var(--border-strong)}
      .field input:focus, .field select:focus{border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,107,53,.25)}
      .row{display:flex;gap:.6rem;flex-wrap:wrap}
      .row > *{flex:1 1 160px}
      .actions{display:grid;gap:.6rem;margin-top:.2rem}
      .btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;border-radius:12px;padding:.75rem .9rem;cursor:pointer}
      .btn-primary{background:var(--action);color:#fff}
      .btn-primary:hover{background:var(--action-700)}
      .btn-outline{background:#fff;border:1px solid var(--border);color:#374151}
      .btn-outline:hover{background:var(--surface)}

      .help{text-align:center;color:var(--muted);font-size:.9rem;margin:.2rem 0 0}

      @media (max-width: 520px){ .card{padding:18px} }
    

@media (max-width: 600px) {
  /* Forzamos la responsividad del modal en datos.html para moviles.
     Es necesario usar !important para sobreescribir los estilos en linea del HTML.
  */

  /* Ajusta el fondo del modal para alinearlo arriba y darle espacio. */
  #edit-data-modal {
    align-items: flex-start !important;
    padding-top: 5vh !important;
    padding-bottom: 5vh !important;
  }

  /* Ajusta la tarjeta del modal: limita su altura y permite el scroll si el contenido se desborda. */
  #edit-data-modal .modal-card {
    max-height: 90vh; /* Maxima altura del 90% de la ventana */
    overflow-y: auto !important; /* Activa el scroll vertical solo si es necesario */
  }
}

/* Autocomplete */
.autocomplete-wrap {
  position: relative;
}

.autocomplete-list {
  position: absolute;
  inset-inline: 0;
  top: 100%;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  margin-top: 4px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
  z-index: 50;
  display: none;
}

.autocomplete-list.is-open {
  display: block;
}

.autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.4;
}

.autocomplete-item:hover,
.autocomplete-item:focus {
  background: #f3f4f6;
}

.autocomplete-item.muted {
  color: #6b7280;
  cursor: default;
}