/* Diario de un bebé: paleta rosada tenue (modo en la sesión) y estilos de la página del diario.
   Si el bebé es niño, <html> lleva la clase eco-bebe-azul y los mismos tokens pasan a azul clarito
   (al final de este archivo). */
:root {
  --rosa-fondo: #FBEFEE;
  --rosa-papel: #FFF8F7;
  --rosa-tinta: #4A2A30;
  --rosa-suave: #7D5560;
  --rosa-claro: #F6D9DB;
  --rosa-medio: #E7B4BA;
  --rosa-fuerte: #D98E98;
  --rosa-hondo: #9A4F5C;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rosa-fondo: #261A1D;
    --rosa-papel: #33232A;
    --rosa-tinta: #F8E3E5;
    --rosa-suave: #C9A0A8;
    --rosa-claro: #4A2E35;
    --rosa-medio: #7A4B55;
    --rosa-fuerte: #D98E98;
    --rosa-hondo: #F0B5BE;
  }
}

/* --- Modo en la sesión (app.html) --- */
html.eco-bebe-activo { --bg: var(--rosa-fondo); --ink: var(--rosa-tinta); --ink-soft: var(--rosa-suave); --gold: var(--rosa-hondo); --gold-deep: var(--rosa-hondo); --moss: var(--rosa-fuerte); --bubble-user: var(--rosa-claro); }
html.eco-bebe-activo body { background: var(--rosa-fondo) !important; color: var(--rosa-tinta); }
html.eco-bebe-activo .device { background: var(--rosa-papel) !important; }
html.eco-bebe-activo .orb { background: var(--rosa-fuerte) !important; box-shadow: 0 10px 26px -10px rgba(217, 142, 152, 0.65) !important; color: #4A1F28 !important; }
html.eco-bebe-activo .orb[data-state="listening"] { background: var(--rosa-hondo) !important; color: #fff !important; }
html.eco-bebe-activo .orb[data-state="speaking"], html.eco-bebe-activo .orb[data-state="thinking"] { background: #B8707C !important; color: #fff !important; }
html.eco-bebe-activo .orb[data-state="paused"] { background: var(--rosa-suave) !important; }
html.eco-bebe-activo .write-row button, html.eco-bebe-activo .invite-cta { background: var(--rosa-hondo) !important; }
html.eco-bebe-activo .write-toggle { color: var(--rosa-hondo); }
html.eco-bebe-activo .body-area { gap: 14px; }
html.eco-bebe-activo .greeting .sub { font-size: 1rem; }

.eco-bebe-pill {
  align-self: center; border: 1px solid var(--rosa-medio, #E7B4BA); background: transparent; color: var(--rosa-hondo, #9A4F5C);
  border-radius: 999px; padding: 8px 16px; font: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer; min-height: 40px;
}
.eco-bebe-pill[aria-pressed="true"] { background: var(--rosa-claro); border-color: var(--rosa-fuerte); }
.eco-bebe-pill[hidden], .eco-bebe-panel[hidden] { display: none; }
.eco-bebe-fila { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.eco-bebe-chip[hidden] { display: none; }
/* Edad en días, arriba a la derecha de la tarjeta (solo cuando ya nació). */
html.eco-bebe-activo .device { position: relative; }
.eco-bebe-edad {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  display: grid; justify-items: center; gap: 0; min-width: 58px; padding: 6px 10px;
  border-radius: 14px; background: var(--rosa-claro); color: var(--rosa-hondo); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.eco-bebe-edad[hidden] { display: none; }
.eco-bebe-fila.con-edad { padding-inline: 76px; }
.eco-bebe-edad-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.eco-bebe-edad-num { font-size: 1.35rem; font-weight: 800; }
.eco-bebe-edad-unidad { font-size: 0.72rem; font-weight: 700; }

.eco-bebe-panel { display: flex; flex-direction: column; gap: 12px; width: 100%; text-align: center; }
.eco-bebe-chip { align-self: center; margin: 0; background: var(--rosa-claro); color: var(--rosa-hondo); border-radius: 999px; padding: 4px 14px; font-size: 0.9rem; font-weight: 700; }
.eco-bebe-grande, .eco-bebe-secundario {
  border-radius: 14px; font: inherit; font-weight: 700; font-size: 1rem; min-height: 50px; padding: 12px 16px; cursor: pointer; width: 100%;
}
.eco-bebe-grande { border: none; background: var(--rosa-fuerte); color: #4A1F28; }
.eco-bebe-secundario { border: 1px solid var(--rosa-medio); background: var(--rosa-claro); color: var(--rosa-hondo); }
.eco-bebe-grande:disabled, .eco-bebe-secundario:disabled { opacity: 0.6; cursor: default; }
.eco-bebe-enlace { color: var(--rosa-hondo); font-size: 0.95rem; }
.eco-bebe-msg { margin: 0; min-height: 1.2em; color: var(--rosa-suave); font-size: 0.9rem; }
.eco-bebe-msg.error { color: #B3261E; }
.eco-bebe-nota { display: flex; flex-direction: column; gap: 8px; }
.eco-bebe-nota[hidden] { display: none; }
.eco-bebe-nota textarea, .eco-bebe-campo input, .eco-bebe-campo select, .eco-bebe-campo textarea {
  width: 100%; box-sizing: border-box; border: 1px solid var(--rosa-medio); border-radius: 12px; background: var(--rosa-papel);
  color: var(--rosa-tinta); font: inherit; padding: 10px 12px;
}
.eco-bebe-nota textarea { min-height: 70px; resize: vertical; }

/* --- Página del diario (diario-bebe.html) --- */
.eco-bebe-pagina { margin: 0; background: var(--rosa-fondo); color: var(--rosa-tinta); font-family: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif; line-height: 1.5; min-height: 100vh; }
.eco-bebe-contenedor { width: min(640px, 100%); margin: 0 auto; padding: 20px 16px 56px; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; }
.eco-bebe-volver { color: var(--rosa-hondo); text-decoration: none; font-weight: 700; align-self: flex-start; padding: 8px 0; }
.eco-bebe-titulo { font-family: "Source Serif 4", Georgia, serif; font-size: 1.9rem; margin: 0; font-weight: 600; }
.eco-bebe-sub { margin: 0; color: var(--rosa-suave); }
.eco-bebe-tarjeta { background: var(--rosa-papel); border: 1px solid var(--rosa-claro); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.eco-bebe-tarjeta[hidden], .eco-bebe-campo[hidden] { display: none; }
.eco-bebe-campo { display: flex; flex-direction: column; gap: 4px; }
.eco-bebe-campo label { font-weight: 700; font-size: 0.95rem; }
.eco-bebe-fila { display: flex; align-items: center; gap: 8px; }
.eco-bebe-fila input[type="checkbox"] { width: 22px; height: 22px; accent-color: var(--rosa-hondo); }
.eco-bebe-form { display: flex; flex-direction: column; gap: 12px; }
.eco-bebe-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.eco-bebe-entrada { background: var(--rosa-papel); border: 1px solid var(--rosa-claro); border-radius: 18px; overflow: hidden; }
.eco-bebe-entrada img { width: 100%; max-height: 520px; object-fit: cover; display: block; background: var(--rosa-claro); }
.eco-bebe-entrada .cuerpo { padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 6px; }
.eco-bebe-entrada p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.eco-bebe-fecha { color: var(--rosa-suave); font-size: 0.85rem; }
.eco-bebe-borrar { align-self: flex-start; border: none; background: none; color: var(--rosa-suave); text-decoration: underline; font: inherit; font-size: 0.85rem; cursor: pointer; padding: 6px 0; min-height: 32px; }
.eco-bebe-vacio { text-align: center; color: var(--rosa-suave); padding: 24px 8px; }
.eco-bebe-aviso { margin: 0; color: var(--rosa-suave); font-size: 0.9rem; }
.eco-bebe-pagina details summary { cursor: pointer; font-weight: 700; padding: 8px 0; color: var(--rosa-hondo); }
.eco-bebe-pagina :focus-visible, .eco-bebe-panel :focus-visible, .eco-bebe-pill:focus-visible { outline: 3px solid var(--rosa-hondo); outline-offset: 2px; }

.eco-bebe-enlace-familia { display: inline-block; margin: 4px 0 10px; padding: 8px 16px; border-radius: 999px; background: var(--rosa-claro); color: var(--rosa-hondo); border: 1px solid var(--rosa-medio); font-weight: 700; text-decoration: none; }

/* Nota por voz: el botón redondo de ECO reemplaza la caja de texto (la caja solo aparece si no hay micrófono). */
.eco-bebe-invitacion { margin: 4px 0 0; text-align: center; color: var(--rosa-suave); font-size: 0.95rem; }
.eco-bebe-voz { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 4px 0 6px; }
.eco-bebe-orbe { display: flex; align-items: center; justify-content: center; width: 128px; height: 128px; padding: 10px; border: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #b8697a, #7d3a48); color: #fff; font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; box-shadow: 0 0 0 6px var(--rosa-claro); }
.eco-bebe-orbe:focus-visible { outline: 3px solid var(--rosa-hondo); outline-offset: 4px; }
.eco-bebe-orbe:disabled { opacity: 0.65; cursor: default; }
.eco-bebe-orbe[hidden] { display: none; }
.eco-bebe-orbe.grabando { animation: eco-bebe-latido 1.1s ease-in-out infinite; box-shadow: 0 0 0 12px var(--rosa-medio); }
@keyframes eco-bebe-latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .eco-bebe-orbe.grabando { animation: none; } }
.eco-bebe-voz-msg { margin: 0; min-height: 1.2em; text-align: center; font-size: 0.9rem; color: var(--rosa-suave); }
.eco-bebe-voz-msg.error { color: #A3263A; }
.eco-bebe-dicho { margin: 0; padding: 10px 12px; width: 100%; border-radius: 12px; background: var(--rosa-papel); border: 1px solid var(--rosa-medio); color: var(--rosa-tinta); font-style: italic; overflow-wrap: anywhere; }
.eco-bebe-dicho[hidden], .eco-bebe-revoz[hidden] { display: none; }
.eco-bebe-revoz { border: none; background: none; color: var(--rosa-hondo); text-decoration: underline; font: inherit; font-size: 0.9rem; min-height: 44px; cursor: pointer; }
.eco-bebe-nota textarea[hidden], .eco-bebe-campo textarea[hidden] { display: none; }
.eco-bebe-audio { display: block; width: 100%; margin: 6px 0; }

/* --- Niño: la misma paleta tenue en azul clarito --- */
html.eco-bebe-azul {
  --rosa-fondo: #EEF5FB;
  --rosa-papel: #F7FBFE;
  --rosa-tinta: #21354A;
  --rosa-suave: #50677D;
  --rosa-claro: #D6E7F5;
  --rosa-medio: #A9CAE6;
  --rosa-fuerte: #8CB8DC;
  --rosa-hondo: #3A6A92;
}
@media (prefers-color-scheme: dark) {
  html.eco-bebe-azul:not([data-theme="light"]) {
    --rosa-fondo: #152029;
    --rosa-papel: #1D2A35;
    --rosa-tinta: #E2EEF8;
    --rosa-suave: #9BB4CA;
    --rosa-claro: #263A4B;
    --rosa-medio: #44637E;
    --rosa-fuerte: #8CB8DC;
    --rosa-hondo: #B2D2EE;
  }
}
html.eco-bebe-azul.eco-bebe-activo .orb { box-shadow: 0 10px 26px -10px rgba(140, 184, 220, 0.65) !important; color: #13283B !important; }
html.eco-bebe-azul.eco-bebe-activo .orb[data-state="speaking"], html.eco-bebe-azul.eco-bebe-activo .orb[data-state="thinking"] { background: #5B8BB3 !important; }
html.eco-bebe-azul .eco-bebe-grande { color: #13283B; }
html.eco-bebe-azul .eco-bebe-orbe { background: radial-gradient(circle at 35% 30%, #6A9BC5, #2E5675); }
html.eco-bebe-azul .eco-bebe-voz-msg.error { color: #A3263A; }

/* Entradas del diario que vienen de la charla del modo bebé (también están en el libro). */
.eco-bebe-origen { display: inline-block; align-self: flex-start; font-size: 0.75rem; font-weight: 700; color: var(--rosa-hondo); background: var(--rosa-claro); border-radius: 999px; padding: 2px 10px; margin-bottom: 4px; }

/* Foto recién subida dentro del círculo de ECO mientras se cuenta su historia: ocupa todo el
   círculo, sin logo ni texto encima (el anillo que respira queda por fuera y no la tapa). */
.orb .orb-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: none; pointer-events: none; }
.orb.con-foto .orb-foto { display: block; }
.orb.con-foto .orb-logo, .orb.con-foto #orbLabel { visibility: hidden; }
html.eco-bebe-activo .orb.con-foto { box-shadow: 0 0 0 4px var(--rosa-papel), 0 0 0 7px var(--rosa-fuerte), 0 14px 30px -12px rgba(0, 0, 0, 0.35) !important; }