/* TPApp v3.0 - dashboard.css: header, dropdown, hero y layout principal */

/* HEADER fijo azul marino */
.header {
  background: var(--primary);
  color: #fff;
  padding: .8rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* Espacio para logo en el header: pegar el <img> adentro sin tocar el layout.
   Sin imagen adentro (pantallas internas, solo de relleno para centrar el título)
   queda totalmente transparente en vez de mostrarse como un círculo vacío. */
.header .logo-slot-sm {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 12px;
}
.header .logo-slot-sm:has(img) {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.header .logo-slot-sm img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }

/* Membrete del header: sello + tipografía en HTML, alineado a la izquierda.
   Antes era el PNG del membrete completo centrado en absolute; el problema es
   que el ancho útil lo definía el menú de la derecha, así que en mobile el PNG
   se escalaba hasta que la bajada quedaba ilegible. Con el texto en HTML se
   mantiene nítido en cualquier densidad y cada línea se ajusta por separado.
   La serif es la misma del logo (Times New Roman; Tinos es su clon métrico
   para los Android que no la traen). */
.header:has(.header-brand) { min-height: 72px; }
.header .header-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  min-width: 0;          /* deja que el texto se recorte antes de empujar el menú */
  margin-right: auto;
}
.header .hb-seal {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.header .hb-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  font-family: 'Tinos', 'Times New Roman', Times, serif;
  line-height: 1.12;
  white-space: nowrap;
  overflow: hidden;
}
.header .hb-name {
  font-size: 17px;
  letter-spacing: .055em;
  text-overflow: ellipsis;
  overflow: hidden;
}
.header .hb-tag {
  font-size: 11.5px;
  letter-spacing: .11em;
  color: rgba(255, 255, 255, 0.78);
  text-overflow: ellipsis;
  overflow: hidden;
}
@media (max-width: 520px) {
  .header:has(.header-brand) { min-height: 62px; }
  .header .hb-seal { width: 38px; height: 38px; }
  .header .hb-name { font-size: 15px; }
  .header .hb-tag { font-size: 10.5px; letter-spacing: .08em; }
}
@media (max-width: 380px) {
  .header .header-brand { gap: .45rem; }
  .header .hb-seal { width: 34px; height: 34px; }
  .header .hb-name { font-size: 13.5px; letter-spacing: .04em; }
  .header .hb-tag { font-size: 9.5px; letter-spacing: .05em; }
}

.header h2 {
  font-size: 16px;
  font-weight: 600;
  flex: 1;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.back-btn,
.menu-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* DROPDOWN del menú de usuario */
.menu-wrap { position: relative; }
.dropdown {
  position: absolute;
  top: 52px;
  right: 0;
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: 12px;
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  display: none;
  z-index: 200;
}
.dropdown.open { display: block; }
.dropdown-user {
  padding: .8rem 1rem;
  border-bottom: 0.5px solid var(--border);
  background: var(--bg);
  cursor: default;
}
.dropdown-user .du-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dropdown-user .du-role { font-size: 12px; color: var(--muted); }
.dropdown-item {
  padding: .8rem 1rem;
  font-size: 14px;
  cursor: pointer;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: .6rem;
  border-bottom: 0.5px solid var(--border);
  min-height: 44px;
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item > i { width: 16px; text-align: center; font-size: 13px; color: var(--muted); }
.dropdown-item.danger > i { color: var(--danger); }
.dropdown-item.danger { color: var(--danger); }
.dropdown-item:hover { background: var(--bg); }

/* CONTENIDO centrado mobile-first */
.content {
  flex: 1;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

/* HERO — plano, compacto, con ícono decorativo a la derecha */
.hero {
  background: var(--primary);
  border-radius: 16px;
  padding: 1.2rem 1.5rem;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.hero-top { display: flex; align-items: center; gap: 1rem; }
.hero-main { flex: 1; min-width: 0; }
.hero-badge {
  background: rgba(232, 160, 32, 0.18);
  color: var(--accent);
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: .6rem;
}
.hero h1 { font-size: 22px; margin-bottom: .3rem; font-weight: 600; }
.hero p { font-size: 13.5px; opacity: .82; }
.accent-text { color: var(--accent); }
.hero-deco { font-size: 46px; color: rgba(255, 255, 255, 0.25); flex-shrink: 0; }

/* Datos personales dentro del hero: una sola línea de campos separada por un
   filete, con el botón de editar al final, para no arrastrar una card aparte. */
.hero-datos {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .18);
  padding-top: .75rem;
}
/* Las columnas ocupan lo que necesita su contenido (no se estiran a todo el
   ancho): quedan juntas a la izquierda y el botón de editar se va al extremo. */
.hero-datos .hd-grid {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.6rem;
}
.hero-datos .hd-item { min-width: 0; }
.hero-datos .hd-lbl {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .62;
  margin-bottom: 2px;
}
.hero-datos .hd-val {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hero-edit {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex-shrink: 0;
  margin-left: auto;
  white-space: nowrap;
  padding: .5rem .9rem;
  background: rgba(255, 255, 255, .14);
  border: none;
  border-radius: 9px;
  color: #fff;
  font-family: 'Sora', sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s ease;
}
.hero-edit:hover { background: rgba(255, 255, 255, .24); }
.hero-edit i { font-size: 11px; opacity: .85; }

/* En pantallas chicas los datos personales no entran sin apretar el saludo:
   se ocultan y queda solo el lápiz, arriba a la derecha, para ir a editarlos.
   El maletín decorativo cede el lugar (es puro adorno). */
@media (max-width: 560px) {
  .hero { position: relative; }
  .hero-deco { display: none; }
  .hero-datos { display: contents; }
  .hero-datos .hd-grid { display: none; }
  .hero-edit {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    margin-top: 0;
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
  }
  .hero-edit .he-txt { display: none; }
  .hero-edit i { font-size: 13px; opacity: 1; }
  /* deja aire para que el badge no choque con el botón */
  .hero-main { padding-right: 2.75rem; }
}

@media (max-width: 400px) { .hero { padding: 1.25rem; } }

/* GRILLA de accesos — tarjetas con tile de ícono (no bloques sólidos) */
.btn-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
}
.btn-main {
  background: var(--card);
  color: var(--text);
  border: 0.5px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1rem;
  cursor: pointer;
  font-family: 'Sora', sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
  text-align: left;
  transition: transform .15s, border-color .15s;
  width: 100%;
  min-height: 44px;
  box-shadow: var(--shadow);
}
.btn-main:hover { transform: translateY(-2px); border-color: var(--primary-light); }
.btn-main:active { transform: scale(.98); }
/* Tile del ícono (dentro de las tarjetas de la grilla) */
.btn-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
}
.btn-main.accent .btn-icon { background: color-mix(in srgb, var(--accent) 22%, transparent); }
@supports not (background: color-mix(in srgb, red, blue)) {
  .btn-icon { background: var(--input-bg); }
}

/* Botón ancho (Historial, Administración): fila con ícono + texto + chevron */
.btn-main.wide {
  flex-direction: row;
  align-items: center;
  gap: .8rem;
  padding: .95rem 1.15rem;
  color: var(--primary);
}
.btn-main.wide > span:first-child {
  width: 34px; height: 34px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  flex-shrink: 0;
}
.btn-main.wide::after {
  content: '\f054';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-left: auto;
  font-size: 13px;
  color: var(--muted);
}
.btn-main.secondary { background: var(--card); }

/* Acción al pie de una card ("Ver historial completo", "Editar mis datos").
   Un botón .btn-main.wide adentro de una card queda como una segunda tarjeta
   remarcada dentro de otra (borde + sombra + fondo propio), muy pesado. Acá
   se aplana a una franja de ancho completo, separada solo por una línea. */
.card-has-foot { padding-bottom: 0; }
/* La última fila de datos no lleva línea propia: la separación la da el pie */
.card-has-foot .fila:last-of-type { border-bottom: none; }
.card-foot-link {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: calc(100% + 2.5rem);
  margin: 0 -1.25rem;
  padding: .85rem 1.25rem;
  background: transparent;
  border: none;
  border-top: 0.5px solid var(--border);
  border-radius: 0 0 14px 14px;
  color: var(--primary);
  font-family: 'Sora', sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s ease;
}
.card-foot-link:hover { background: var(--input-bg); }
/* Chevron pegado al borde derecho */
.card-foot-link::after {
  content: '\f054';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}
.card-foot-link > i { font-size: 12px; opacity: .8; width: 14px; text-align: center; }

/* Tarjetas de cotización (Vida/Sepelio) — color de marca sólido */
.cotiza-card {
  border: none;
  border-radius: 14px;
  padding: 16px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: left;
  color: #fff;
  font-family: 'Sora', sans-serif;
  width: 100%;
  min-height: 44px;
  transition: transform .15s, filter .15s;
}
.cotiza-card:hover { transform: translateY(-2px); filter: brightness(1.07); }
.cotiza-card:active { transform: scale(.98); }
.cotiza-card.vida { background: var(--primary); }
.cotiza-card.sepelio { background: #B47A12; }
.cotiza-card .cc-top { display: flex; align-items: center; justify-content: space-between; }
.cotiza-card .cc-top > i:first-child { font-size: 24px; }
.cotiza-card .cc-arrow { font-size: 15px; opacity: .55; }
.cotiza-card .cc-txt { display: flex; flex-direction: column; gap: 2px; }
.cotiza-card .cc-title { font-size: 15px; font-weight: 600; }
.cotiza-card .cc-sub { font-size: 12px; opacity: .82; font-family: 'DM Sans', sans-serif; font-weight: 400; }

/* Variante full-width en fila (ícono + texto + flecha), p.ej. Verificar cobertura */
.cotiza-card.full { flex-direction: row; align-items: center; gap: 14px; padding: 18px; }
.cotiza-card .cc-ico {
  width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; background: rgba(255, 255, 255, 0.15);
}
.cotiza-card.full .cc-txt { flex: 1; min-width: 0; }
.cotiza-card.full .cc-arrow { font-size: 16px; flex-shrink: 0; }

/* Botón de menú convertido en avatar (iniciales) */
.menu-btn.avatar {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .02em;
}
.menu-btn.avatar:hover { background: rgba(255, 255, 255, 0.3); }

/* Previsualización de cotizaciones en el dashboard */
.cotiz-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .65rem 0;
  border-bottom: 0.5px solid var(--border);
}
.cotiz-row:last-child { border-bottom: none; }
/* Filas con payload guardado: se pueden reabrir para compartir */
.cotiz-row.is-click {
  cursor: pointer;
  margin: 0 -.6rem;
  padding-left: .6rem;
  padding-right: .6rem;
  border-radius: 10px;
  transition: background-color .15s ease;
}
.cotiz-row.is-click:hover { background: var(--input-bg); }
.cotiz-row.is-click:focus-visible { outline: 2px solid var(--primary-light); outline-offset: -2px; }
.cotiz-row .cr-go { font-size: 11px; color: var(--muted); opacity: 0; transition: opacity .15s ease; }
.cotiz-row.is-click:hover .cr-go,
.cotiz-row.is-click:focus-visible .cr-go { opacity: .75; }
.cotiz-row .cr-ramo {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; background: var(--input-bg); flex-shrink: 0;
  color: var(--primary);
}
/* Mismo código de color que las tarjetas de cotización: Vida azul, Sepelio dorado */
.cotiz-row .cr-ramo-vida    { color: var(--primary); background: rgba(43, 91, 168, .10); }
.cotiz-row .cr-ramo-sepelio { color: #9a6a10;        background: rgba(232, 160, 32, .14); }
[data-theme="dark"] .cotiz-row .cr-ramo-sepelio { color: var(--accent); }
.cotiz-row .cr-info { flex: 1; min-width: 0; }
.cotiz-row .cr-info h4 { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cotiz-row .cr-info p { font-size: 12px; color: var(--muted); }
.cotiz-row .cr-suma { font-weight: 600; font-size: 13.5px; white-space: nowrap; color: var(--primary); }
.cotiz-empty { font-size: 13px; color: var(--muted); padding: .6rem 0; text-align: center; }

/* (el pie "Ver historial completo" usa la clase genérica .card-foot-link) */

/* Card de contacto */
.contact-card {
  display: flex; align-items: center; justify-content: center;
  gap: .8rem; padding: 1rem 1.25rem; text-align: center;
}
.contact-card .cc-mail-ico {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--input-bg); color: var(--primary); font-size: 14px;
}
.contact-card p { font-size: 12.5px; color: var(--muted); margin-bottom: .15rem; }
.contact-card a {
  color: var(--primary); font-size: 14px; font-weight: 600;
  text-decoration: none; word-break: break-all;
}
.contact-card a:hover { text-decoration: underline; }

/* RESPONSIVE: el contenido se ensancha en pantallas grandes y queda
   centrado. En mobile/pantallas chicas sigue a todo el ancho (apilado). */
@media (min-width: 480px) {
  .content { padding: 1.25rem 1.5rem; }
}
@media (min-width: 768px) {
  .content { max-width: 880px; padding: 1.5rem; }
  .btn-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1200px) {
  .content { max-width: 1040px; }
}