/* IS Prenatal — sistema visual base
   Paleta alineada a la identidad de Boutique Médica Dra. Indira Sarria:
   terracota (paredes/rótulo del consultorio), marrón beige (fondos y
   neutros cálidos), dorado (logo y columnas) y palo de rosa (acentos
   secundarios) — esquinas redondeadas, botones grandes, mobile-first.
   Los colores de semáforo de alertas (verde/amarillo/rojo) se mantienen
   estándar por seguridad clínica, independientes de la marca. */

:root {
  /* Marrón beige — base neutra cálida */
  --color-bg: #f4e9db;
  --color-surface: #ffffff;
  --color-surface-soft: #efdfcb;
  --color-text: #3b2c1f;
  --color-text-muted: #8a7358;
  --color-border: #e2cfb3;

  /* Terracota — color principal de marca */
  --color-primary: #c1704a;
  --color-primary-dark: #954f30;
  --color-primary-soft: #f0dbcb;

  /* Dorado — acento de marca (logo, botones destacados) */
  --color-accent: #c9a227;
  --color-accent-dark: #9c7d1c;
  --color-accent-soft: #f7ecc8;

  /* Rosado / palo de rosa — acento secundario, toque de feminidad (más vivo) */
  --color-rose: #d6739b;
  --color-rose-dark: #a83f66;
  --color-rose-soft: #fbdfe9;

  --color-verde: #3fa876;
  --color-verde-bg: #e7f6ee;
  --color-amarillo: #c98a12;
  --color-amarillo-bg: #fdf1dc;
  --color-rojo: #d94f4f;
  --color-rojo-bg: #fceaea;

  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow-card: 0 2px 14px rgba(43, 38, 34, 0.07);
  --shadow-card-hover: 0 6px 24px rgba(43, 38, 34, 0.12);
  --max-width: 480px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Segoe UI", "Helvetica Neue", Arial, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--color-primary-dark); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 0.5em 0; line-height: 1.25; }
p { line-height: 1.55; margin: 0 0 1em 0; }

.app-shell {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  min-height: 100vh;
  box-shadow: 0 0 40px rgba(0,0,0,0.04);
  padding-bottom: 84px; /* espacio para nav inferior */
}

.app-shell.no-nav { padding-bottom: 24px; }

.top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  color: var(--color-rose-dark);
}

.brand .brand-mark {
  width: 34px;
  height: 34px;
  object-fit: contain;
  display: block;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 12px 20px 0 20px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary-dark);
  text-decoration: none;
}

.back-link:active {
  opacity: 0.7;
}

.gine-shell .back-link {
  margin: 20px 36px 0 36px;
}

.brand-logo-full {
  height: 46px;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto 6px auto;
}

.top-bar .icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface-soft);
  color: var(--color-primary-dark);
  font-size: 18px;
}

.content { padding: 20px; flex: 1; }
.content.tight { padding: 20px 20px 0 20px; }

.card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 20px;
  box-shadow: var(--shadow-card);
  margin-bottom: 16px;
}

.card-link {
  display: block;
  color: inherit;
}
.card-link:hover { text-decoration: none; }
.card-link .card { transition: box-shadow 0.15s ease, transform 0.15s ease; }
.card-link:hover .card { box-shadow: var(--shadow-card-hover); transform: translateY(-1px); }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.tile {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 18px 14px;
  text-align: center;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: inherit;
}
.tile .tile-icon {
  width: 46px; height: 46px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}
.tile span.label { font-weight: 600; font-size: 14px; }

.tile.tile-alarma { background: var(--color-rojo-bg); }
.tile.tile-alarma .tile-icon { background: var(--color-rojo); color: white; }
.tile.tile-mensaje .tile-icon { background: var(--color-rose); color: white; }
.tile .tile-icon.bg-soft-primary { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.tile .tile-icon.bg-soft-accent { background: var(--color-accent-soft); color: var(--color-accent-dark); }
.tile .tile-icon.bg-soft-rose { background: var(--color-rose-soft); color: var(--color-rose-dark); }

.hero-week {
  background: linear-gradient(135deg, var(--color-primary), var(--color-rose-dark));
  color: white;
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-card);
}
.hero-week .eyebrow { opacity: 0.85; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.hero-week .week-number { font-size: 40px; font-weight: 800; margin: 4px 0 2px 0; }
.hero-week .week-sub { opacity: 0.92; font-size: 14px; }
.hero-week .meta-row { display: flex; gap: 18px; margin-top: 16px; flex-wrap: wrap; }
.hero-week .meta-item { font-size: 13px; }
.hero-week .meta-item b { display: block; font-size: 15px; }

.progress-track {
  width: 100%;
  height: 10px;
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
  margin-top: 14px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: white;
  border-radius: 999px;
}

.progress-track.on-surface {
  background: var(--color-border);
}
.progress-track.on-surface .progress-fill { background: var(--color-primary); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.badge-verde { background: var(--color-verde-bg); color: var(--color-verde); }
.badge-amarillo { background: var(--color-amarillo-bg); color: var(--color-amarillo); }
.badge-rojo { background: var(--color-rojo-bg); color: var(--color-rojo); }
.badge-neutral { background: var(--color-rose-soft); color: var(--color-rose-dark); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 52px;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  border: none;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
}
.btn-primary { background: var(--color-primary); color: white; }
.btn-primary:hover { background: var(--color-primary-dark); text-decoration: none; }
.btn-accent { background: var(--color-accent); color: white; }
.btn-accent:hover { background: var(--color-accent-dark); text-decoration: none; }
.btn-outline { background: transparent; border: 2px solid var(--color-primary); color: var(--color-primary-dark); }
.btn-danger { background: var(--color-rojo); color: white; }
.btn-secondary { background: var(--color-surface-soft); color: var(--color-text); }
.btn-rose { background: var(--color-rose); color: white; }
.btn-rose:hover { background: var(--color-rose-dark); text-decoration: none; }
.btn-outline-rose { background: transparent; border: 2px solid var(--color-rose); color: var(--color-rose-dark); }
.btn-sm { min-height: 40px; font-size: 14px; padding: 8px 14px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-block-group { display: flex; flex-direction: column; gap: 10px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--color-text); }
.field .hint { font-size: 12px; color: var(--color-text-muted); margin-top: 4px; }
input, select, textarea {
  width: 100%;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-border);
  font-size: 15px;
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}
textarea { resize: vertical; min-height: 80px; }
fieldset { border: none; padding: 0; margin: 0 0 16px 0; }
legend { font-weight: 700; font-size: 15px; margin-bottom: 8px; padding: 0; }
.checkbox-row { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.checkbox-row input { width: auto; margin-top: 3px; }
.checkbox-row label { font-weight: 400; font-size: 13.5px; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.symptom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 20px; }
.symptom-btn {
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 14px 10px;
  font-size: 13.5px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  min-height: 64px;
  display: flex; align-items: center; justify-content: center;
}
.symptom-btn input { display: none; }
.symptom-btn.checked {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
  color: var(--color-accent-dark);
}

.alert-banner {
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 600;
}
.alert-banner.rojo { background: var(--color-rojo-bg); color: var(--color-rojo); border: 1.5px solid var(--color-rojo); }
.alert-banner.amarillo { background: var(--color-amarillo-bg); color: var(--color-amarillo); border: 1.5px solid var(--color-amarillo); }
.alert-banner.verde { background: var(--color-verde-bg); color: var(--color-verde); border: 1.5px solid var(--color-verde); }
.alert-banner.info { background: var(--color-primary-soft); color: var(--color-primary-dark); border: 1.5px solid var(--color-primary); }

.disclaimer {
  font-size: 12px;
  color: var(--color-text-muted);
  background: var(--color-surface-soft);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 10px;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--max-width);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  display: flex;
  justify-content: space-around;
  padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0));
  z-index: 20;
}
.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 6px 8px;
  border-radius: 12px;
  flex: 1;
}
.bottom-nav a .nav-icon { font-size: 19px; }
.bottom-nav a.active { color: var(--color-rose-dark); background: var(--color-rose-soft); }
.bottom-nav a:hover { text-decoration: none; }

.list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
  gap: 12px;
}
.list-item > *:last-child {
  text-align: right;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}
.list-item:last-child { border-bottom: none; }
.list-item .title { font-weight: 700; font-size: 14.5px; }
.list-item .subtitle { font-size: 12.5px; color: var(--color-text-muted); margin-top: 2px; }

.tabs { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 16px; padding-bottom: 4px; }
.tabs a {
  white-space: nowrap;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  background: var(--color-surface-soft);
  color: var(--color-text-muted);
}
.tabs a.active { background: var(--color-rose); color: white; }
.tabs a:hover { text-decoration: none; }

.timeline-item { position: relative; padding-left: 22px; padding-bottom: 22px; border-left: 2px solid var(--color-border); margin-left: 6px; }
.timeline-item:last-child { border-color: transparent; padding-bottom: 0; }
.timeline-item::before {
  content: "";
  position: absolute;
  left: -7px; top: 2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 2px solid white;
}

.stat-row { display: flex; gap: 10px; }
.stat-box { flex: 1; background: var(--color-surface-soft); border-radius: var(--radius-sm); padding: 12px; text-align: center; }
.stat-box .num { font-size: 20px; font-weight: 800; color: var(--color-primary-dark); }
.stat-box .lbl { font-size: 11px; color: var(--color-text-muted); font-weight: 600; }

.auth-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px 24px;
  max-width: var(--max-width);
  margin: 0 auto;
  width: 100%;
}
.auth-logo { text-align: center; margin-bottom: 28px; }
.auth-logo .brand-mark { width: 60px; height: 60px; font-size: 28px; margin: 0 auto 12px auto; border-radius: 18px; }
.auth-logo h1 { font-size: 21px; color: var(--color-primary-dark); }
.auth-logo p { color: var(--color-text-muted); font-size: 13.5px; margin-bottom: 0; }

.role-toggle { display: flex; gap: 8px; margin-bottom: 20px; background: var(--color-surface-soft); padding: 5px; border-radius: 999px; }
.role-toggle a { flex: 1; text-align: center; padding: 10px; border-radius: 999px; font-weight: 700; font-size: 13.5px; color: var(--color-text-muted); }
.role-toggle a.active { background: var(--color-surface); color: var(--color-rose-dark); box-shadow: var(--shadow-card); }
.role-toggle a:hover { text-decoration: none; }

.chart-wrap { overflow-x: auto; }

.chat-thread { display: flex; flex-direction: column; gap: 10px; padding: 4px 0 16px 0; }
.msg-bubble { max-width: 78%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.4; }
.msg-bubble.mine { align-self: flex-end; background: var(--color-rose); color: white; border-bottom-right-radius: 4px; }
.msg-bubble.theirs { align-self: flex-start; background: var(--color-surface-soft); color: var(--color-text); border-bottom-left-radius: 4px; }
.msg-bubble.system-alert { align-self: center; background: var(--color-rojo-bg); color: var(--color-rojo); border: 1.5px solid var(--color-rojo); font-weight: 700; text-align: center; max-width: 100%; }
.msg-meta { font-size: 10.5px; opacity: 0.75; margin-top: 3px; }

.empty-state { text-align: center; padding: 36px 16px; color: var(--color-text-muted); }
.empty-state .emoji { font-size: 36px; margin-bottom: 10px; }

.section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.section-title h2 { font-size: 16px; margin: 0; }
.section-title a { font-size: 12.5px; font-weight: 700; }

.risk-tag { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; background: var(--color-rojo-bg); color: var(--color-rojo); margin: 2px 4px 2px 0; }

@media (min-width: 540px) {
  .app-shell { min-height: 96vh; margin-top: 2vh; border-radius: 28px; overflow: hidden; }
  .bottom-nav { border-bottom-left-radius: 28px; border-bottom-right-radius: 28px; }
}

/* Panel del ginecólogo/a: en pantallas de computadora aprovecha el ancho completo con un
   menú lateral fijo, en vez del formato angosto tipo celular que usa el resto de la app
   (el lado de la paciente se queda igual en todos los tamaños de pantalla). */
@media (min-width: 900px) {
  .gine-shell {
    max-width: 1120px;
    width: calc(100% - 260px);
    margin: 0 0 0 220px;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
    padding-bottom: 40px;
  }
  .gine-shell .top-bar { padding: 20px 36px; }
  .gine-shell .content { padding: 28px 36px; }
  .gine-shell .tabs { flex-wrap: wrap; overflow-x: visible; }

  .gine-shell .bottom-nav {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    transform: none;
    width: 220px;
    max-width: 220px;
    height: 100vh;
    background: var(--color-surface);
    border-top: none;
    border-right: 1px solid var(--color-border);
    border-radius: 0;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    padding: 84px 14px 24px 14px;
  }
  .gine-shell .bottom-nav a {
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: 12px;
    font-size: 14.5px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
  }
  .gine-shell .bottom-nav a .nav-icon { font-size: 18px; }
}

.brand-footer {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border);
  text-align: center;
}
.brand-footer-logo { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; margin-bottom: 6px; }
.brand-footer-nombre { font-size: 12.5px; font-weight: 700; color: var(--color-text); margin-bottom: 8px; }
.brand-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; margin-bottom: 10px; }
.brand-footer-links a { font-size: 12px; color: var(--color-text-muted); text-decoration: none; }
.brand-footer-links a:hover { color: var(--color-primary); text-decoration: underline; }
.brand-footer-soporte {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-rose-dark);
  text-decoration: none;
}
.brand-footer-soporte:hover { text-decoration: underline; }

/* Encabezado y pie de página exclusivos para impresión: dan marca (logo, nombre,
   colores) a cualquier documento impreso (carnet, plan de parto, controles, etc.),
   ya que estos se muestran a las EPS y a las pacientes. Ocultos en pantalla. */
.print-header {
  display: none;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 20px;
  border-bottom: 3px solid var(--color-primary);
}
.print-header-logo { width: 50px; height: 50px; object-fit: contain; flex-shrink: 0; }
.print-header-info { flex: 1; }
.print-header-title {
  font-size: 21px;
  font-weight: 800;
  color: var(--color-primary-dark);
  letter-spacing: 0.01em;
}
.print-header-sub { font-size: 12px; color: var(--color-text-muted); margin-top: 2px; }
.print-header-fecha { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; text-align: right; }

.print-footer {
  display: none;
  margin-top: 26px;
  padding-top: 12px;
  border-top: 2px solid var(--color-accent);
  text-align: center;
}
.print-footer-text { font-size: 11.5px; font-weight: 700; color: var(--color-primary-dark); }
.print-footer-disclaimer { font-size: 10px; color: var(--color-text-muted); margin-top: 4px; line-height: 1.4; }

/* Impresión: documentos con marca (logo, colores) para que se vean profesionales al
   mostrarse a las EPS y a las pacientes — carnet, plan de parto, controles, etc.
   Ver clase .no-print en las vistas para ocultar botones/formularios de captura.
   IMPORTANTE: la regla @media (min-width: 540px) de arriba le pone
   `overflow: hidden` a .app-shell (para el look de "tarjeta redondeada" en
   pantalla) — como los navegadores casi siempre imprimen usando el ancho de
   pantalla de escritorio, esa regla también aplica al imprimir y corta
   cualquier documento largo (como el plan de parto) apenas se pasa de una
   altura de pantalla, aunque el documento tenga más contenido. Por eso aquí
   se fuerza `overflow: visible` y `height: auto` explícitamente. */
@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  .top-bar, .bottom-nav, .no-print { display: none !important; }
  .print-header { display: flex !important; }
  .print-footer { display: block !important; }

  body, .app-shell, .content {
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html, body {
    overflow: visible !important;
    height: auto !important;
  }
  .app-shell {
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding-bottom: 0 !important;
  }
  .content { padding: 14px 6px !important; overflow: visible !important; }

  /* Las tarjetas (.card) NO llevan break-inside: avoid — una tarjeta como la
     de un plan de parto puede tener muchos ítems y, si el navegador tuviera
     que mantenerla completa en una sola página, cuando no cabe entera salta
     por completo a la página siguiente y deja un hueco grande en blanco al
     final de la anterior. Se deja que la tarjeta se reparta entre páginas
     con normalidad; lo que sí se evita es partir un ítem individual a la
     mitad, o dejar un título de sección solo al final de una página. */
  .card {
    background: var(--color-surface) !important;
    box-shadow: none !important;
    border: 1px solid var(--color-border) !important;
    border-left: 5px solid var(--color-primary) !important;
  }

  .hero-week {
    background: linear-gradient(135deg, var(--color-primary), var(--color-rose-dark)) !important;
    break-inside: avoid;
  }

  .section-title h2, h1 {
    color: var(--color-primary-dark) !important;
  }
  .section-title {
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 6px;
    break-after: avoid;
    break-inside: avoid;
  }

  .badge-verde, .badge-amarillo, .badge-rojo, .badge-neutral {
    border: 1px solid currentColor;
  }

  a { color: var(--color-text) !important; text-decoration: none !important; }

  .list-item, .tile { break-inside: avoid; }
}