/* =====================================================================
   CLÍNICA ADREXA · Portal de pacientes y ficha de ingreso
   Paleta tranquila, pensada primero para celular.
   ===================================================================== */
:root {
  --verde: #0f766e;
  --verde-claro: #14a394;
  --verde-suave: #e6f4f1;
  --fondo: #f5f3ee;
  --tarjeta: #ffffff;
  --texto: #1f2a2e;
  --tenue: #5b6b70;
  --borde: #dfe5e3;
  --rojo: #b42318;
  --rojo-suave: #fef3f2;
  --ambar-suave: #fff7e6;
  --radio: 14px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--fondo); color: var(--texto); line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
}
.hidden { display: none !important; }
button { font: inherit; cursor: pointer; }
a { color: var(--verde); }

/* Encabezado */
.p-cabecera {
  background: var(--verde); color: #fff; padding: 14px 18px;
  padding-top: calc(14px + env(safe-area-inset-top));
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.p-cabecera h1 { font-size: 18px; font-weight: 700; }
.p-cabecera small { display: block; font-size: 12px; opacity: 0.85; font-weight: 400; }
.p-cabecera .p-btn-claro { background: rgba(255,255,255,0.15); color: #fff; border: 1px solid rgba(255,255,255,0.35); }

.p-contenedor { max-width: 720px; margin: 0 auto; padding: 18px 16px calc(40px + env(safe-area-inset-bottom)); }
.p-tarjeta { background: var(--tarjeta); border-radius: var(--radio); padding: 20px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); margin-bottom: 14px; }
.p-tarjeta h2 { font-size: 19px; color: var(--verde); margin-bottom: 6px; }
.p-tarjeta h3 { font-size: 16px; color: var(--verde); margin: 14px 0 6px; }
.p-tenue { color: var(--tenue); font-size: 14px; }

/* Botones */
.p-btn { border: none; border-radius: 10px; padding: 12px 18px; font-size: 15px; font-weight: 600; background: var(--verde); color: #fff; }
.p-btn:disabled { opacity: 0.5; }
.p-btn-sec { background: var(--verde-suave); color: var(--verde); }
.p-btn-claro { background: #fff; color: var(--verde); border: 1px solid var(--borde); }
.p-btn-peligro { background: var(--rojo-suave); color: var(--rojo); }
.p-btn-chico { padding: 8px 12px; font-size: 13px; border-radius: 8px; }
.p-fila { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.p-fila.derecha { justify-content: flex-end; }
.p-ancho { width: 100%; }

/* Formularios */
.p-campo { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; font-size: 14px; font-weight: 600; }
.p-campo .p-ayuda { font-weight: 400; color: var(--tenue); font-size: 13px; }
.p-campo input, .p-campo select, .p-campo textarea {
  font: inherit; font-size: 16px; font-weight: 400; padding: 11px 12px; border: 1px solid var(--borde);
  border-radius: 10px; background: #fff; color: var(--texto); width: 100%;
}
.p-campo textarea { resize: vertical; min-height: 90px; }
.p-campo.error input, .p-campo.error select, .p-campo.error textarea { border-color: var(--rojo); background: var(--rojo-suave); }
.p-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 560px) { .p-dos { grid-template-columns: 1fr; } }
.p-opciones { display: flex; flex-wrap: wrap; gap: 8px; }
.p-chip { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--borde); border-radius: 20px; background: #fff; font-weight: 400; font-size: 14px; }
.p-chip input { width: auto; }
.p-check { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14px; margin-bottom: 10px; }
.p-check input { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; }
.p-error { color: var(--rojo); font-size: 14px; margin: 8px 0; }

/* Progreso de la ficha */
.p-progreso { height: 8px; background: var(--borde); border-radius: 8px; overflow: hidden; margin: 8px 0 4px; }
.p-progreso > div { height: 100%; background: var(--verde-claro); transition: width 0.3s; }
.p-paso-titulo { font-size: 13px; color: var(--tenue); }

/* Avisos */
.p-aviso { border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-bottom: 12px; }
.p-aviso.info { background: var(--verde-suave); color: #134e48; }
.p-aviso.ambar { background: var(--ambar-suave); color: #7a4a00; }
.p-crisis { background: var(--rojo-suave); color: var(--rojo); border: 1px solid #f5c2bd; border-radius: 12px; padding: 14px; margin-bottom: 12px; font-size: 14px; }
.p-crisis strong { display: block; margin-bottom: 4px; }
.p-crisis a { color: var(--rojo); font-weight: 700; font-size: 17px; text-decoration: none; display: inline-block; margin: 4px 14px 0 0; }

/* Inicio del portal */
.p-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .p-menu { grid-template-columns: 1fr; } }
.p-opcion { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px; text-align: left; display: flex; flex-direction: column; gap: 6px; }
.p-opcion .icono { font-size: 30px; }
.p-opcion strong { font-size: 16px; color: var(--texto); }
.p-opcion span { font-size: 13px; color: var(--tenue); font-weight: 400; }
.p-volver { background: none; border: none; color: var(--verde); font-weight: 600; padding: 4px 0; margin-bottom: 8px; }

/* Juegos */
.j-zona { position: relative; background: #fff; border: 1px solid var(--borde); border-radius: var(--radio); min-height: 280px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; padding: 16px; user-select: none; touch-action: manipulation; }
.j-estimulo { width: 150px; height: 150px; border-radius: 50%; }
.j-estimulo.verde { background: #16a34a; }
.j-estimulo.rojo { background: #dc2626; }
.j-marcador { display: flex; justify-content: space-between; font-size: 14px; color: var(--tenue); margin-bottom: 8px; }
.j-simon { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 300px; }
.j-simon button { aspect-ratio: 1; border: none; border-radius: 18px; opacity: 0.45; transition: opacity 0.1s, transform 0.1s; }
.j-simon button.encendido { opacity: 1; transform: scale(1.04); }
.j-schulte { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; width: 100%; max-width: 360px; }
.j-schulte button { aspect-ratio: 1; border: 1px solid var(--borde); border-radius: 10px; background: #fff; font-size: 20px; font-weight: 700; color: var(--texto); }
.j-schulte button.hecho { background: var(--verde-suave); color: var(--verde-claro); }
.j-schulte button.mal { background: var(--rojo-suave); }
.j-grande { font-size: 22px; font-weight: 700; color: var(--verde); text-align: center; }

/* Meditación */
.m-circulo { width: 170px; height: 170px; border-radius: 50%; background: radial-gradient(circle, #9fe3d6, var(--verde-claro)); transform: scale(0.6); transition: transform 4s ease-in-out; margin: 20px auto; }
.m-texto { font-size: 18px; text-align: center; min-height: 84px; color: var(--texto); padding: 0 6px; }
.m-tiempo { text-align: center; color: var(--tenue); font-size: 14px; }
.m-escala { display: flex; justify-content: space-between; gap: 4px; }
.m-escala button { flex: 1; padding: 10px 0; border: 1px solid var(--borde); border-radius: 8px; background: #fff; font-weight: 600; }
.m-escala button.sel { background: var(--verde); color: #fff; border-color: var(--verde); }

/* "Busco un cierre": estilo de chat tipo WhatsApp */
.c-chat { display: flex; flex-direction: column; height: calc(100dvh - 64px - env(safe-area-inset-top)); background: #efeae2; }
.c-cabecera { background: #075e54; color: #fff; padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.c-cabecera .c-avatar { width: 38px; height: 38px; border-radius: 50%; background: #cfd8dc; color: #455a64; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.c-cabecera .c-nombre { flex: 1; line-height: 1.2; }
.c-cabecera .c-nombre small { display: block; font-size: 11px; opacity: 0.85; }
.c-cabecera button { background: none; border: none; color: #fff; font-size: 20px; padding: 4px 8px; }
.c-aviso-fijo { background: #fff8d6; color: #5c4a00; font-size: 12px; text-align: center; padding: 6px 10px; }
.c-mensajes { flex: 1; overflow-y: auto; padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.c-burbuja { max-width: 82%; padding: 7px 10px 5px; border-radius: 8px; font-size: 15px; box-shadow: 0 1px 1px rgba(0,0,0,0.08); white-space: pre-wrap; word-wrap: break-word; }
.c-burbuja.yo { align-self: flex-end; background: #d9fdd3; border-top-right-radius: 2px; }
.c-burbuja.guia { align-self: flex-start; background: #fff; border-top-left-radius: 2px; border-left: 3px solid var(--verde-claro); }
.c-burbuja.guia .c-autor { font-size: 12px; font-weight: 700; color: var(--verde); display: block; margin-bottom: 2px; }
.c-meta { display: block; text-align: right; font-size: 11px; color: #667781; margin-top: 2px; }
.c-meta .c-nollega { color: #8696a0; }
.c-dia { align-self: center; background: #e1f2fb; color: #54656f; font-size: 12px; padding: 3px 10px; border-radius: 8px; margin: 6px 0; }
.c-entrada { display: flex; gap: 8px; padding: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom)); background: #f0f2f5; align-items: flex-end; }
.c-entrada textarea { flex: 1; border: none; border-radius: 20px; padding: 10px 14px; font: inherit; font-size: 16px; resize: none; max-height: 120px; }
.c-entrada .c-enviar { width: 46px; height: 46px; border-radius: 50%; border: none; background: #00a884; color: #fff; font-size: 20px; flex-shrink: 0; }
.c-acciones { display: flex; gap: 6px; padding: 6px 8px 0; background: #f0f2f5; overflow-x: auto; }
.c-acciones button { white-space: nowrap; border: 1px solid #d1d7db; background: #fff; border-radius: 16px; padding: 6px 12px; font-size: 13px; color: #075e54; }
.c-contador { display: flex; gap: 10px; }
.c-contador div { flex: 1; background: var(--verde-suave); border-radius: 12px; padding: 12px; text-align: center; }
.c-contador strong { display: block; font-size: 26px; color: var(--verde); }
.c-respira { font-size: 64px; text-align: center; font-weight: 700; color: var(--verde); }

/* Modal simple */
.p-modal { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.p-modal .p-tarjeta { width: 100%; max-width: 520px; margin: 0; border-radius: 18px 18px 0 0; max-height: 90dvh; overflow-y: auto; padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
@media (min-width: 600px) { .p-modal { align-items: center; } .p-modal .p-tarjeta { border-radius: 18px; } }

/* Mis documentos */
.p-burbuja { display: inline-block; min-width: 20px; padding: 0 6px; border-radius: 10px; background: var(--rojo); color: #fff; font-size: 12px; line-height: 20px; text-align: center; vertical-align: middle; margin-left: 4px; }
.p-opcion-docs { border-color: var(--verde-claro); }
.d-titulo { font-size: 21px; color: var(--verde); margin-bottom: 4px; }
.d-sub { font-size: 15px; color: var(--tenue); margin: 18px 0 8px; }
.d-paso { width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; margin-bottom: 10px; color: var(--texto); }
.d-paso strong { display: block; font-size: 16px; }
.d-paso small { display: block; color: var(--tenue); font-size: 13px; margin-top: 2px; }
.d-paso > span:nth-child(2) { flex: 1; }
.d-paso.pendiente { border: 2px solid var(--verde-claro); background: #f3fbf9; }
.d-num { width: 32px; height: 32px; border-radius: 50%; background: var(--verde); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
.d-paso.listo .d-num { background: var(--verde-suave); color: var(--verde); }
.d-flecha { font-size: 26px; color: var(--tenue); }
.d-texto { font-size: 15px; white-space: pre-wrap; }
.d-linea { border: none; border-top: 1px solid var(--borde); margin: 16px 0; }
.d-firma { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 12px; font-size: 14px; font-weight: 600; }
.d-firma canvas { width: 100%; height: auto; aspect-ratio: 3 / 1; border: 2px dashed var(--verde-claro); border-radius: 12px; background: #fff; touch-action: none; }
.d-firma button { align-self: flex-start; }
.d-legal { white-space: pre-wrap; font-size: 14px; line-height: 1.55; max-height: 55dvh; overflow-y: auto; border: 1px solid var(--borde); border-radius: 12px; padding: 12px; background: #fafaf8; }

/* ===== Mi agenda ===== */
.p-opcion-agenda { border-color: #f59e0b; }
.ag-cabeza { margin-bottom: 10px; }
.ag-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.ag-stat { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 6px; display: flex; flex-direction: column; align-items: center; color: var(--texto); }
.ag-stat strong { font-size: 19px; }
.ag-stat span { font-size: 12px; color: var(--tenue); }
.ag-alarmas { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--verde-suave); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; font-size: 14px; color: #134e48; }
.ag-alarmas.urgente { background: #fff1d6; color: #7a4a00; border: 1px solid #f5c66b; }
.ag-pestanas { display: grid; grid-template-columns: 1fr 1fr; background: #e9ece9; border-radius: 12px; padding: 4px; margin-bottom: 12px; }
.ag-pestanas button { border: none; background: none; padding: 10px; border-radius: 9px; font-weight: 600; color: var(--tenue); }
.ag-pestanas button.activa { background: #fff; color: var(--verde); box-shadow: 0 1px 2px rgba(0,0,0,0.08); }
.ag-semana { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; }
.ag-semana::-webkit-scrollbar { display: none; }
.ag-dia { flex: 0 0 54px; border: 1px solid var(--borde); background: #fff; border-radius: 12px; padding: 6px 0; display: flex; flex-direction: column; align-items: center; color: var(--texto); }
.ag-dia small { font-size: 11px; color: var(--tenue); }
.ag-dia strong { font-size: 18px; }
.ag-dia.hoy { border-color: var(--verde-claro); }
.ag-dia.sel { background: var(--verde); color: #fff; border-color: var(--verde); }
.ag-dia.sel small, .ag-dia.sel .ag-puntos { color: #d8f3ee; }
.ag-puntos { font-size: 11px; color: var(--tenue); min-height: 15px; }
.ag-dia-titulo { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
.ag-dia-titulo h3 { font-size: 18px; color: var(--texto); }
.ag-dia-titulo span { font-size: 13px; color: var(--tenue); }
.ag-felicidad { text-align: center; font-weight: 700; color: var(--verde); margin: 8px 0; }
.ag-lista { margin-top: 10px; }
.ag-tarea { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 14px; margin-bottom: 10px; overflow: hidden; transition: opacity 0.2s; }
.ag-tarea.hecha { opacity: 0.6; }
.ag-tarea.hecha .ag-info strong { text-decoration: line-through; }
.ag-tarea.abierta { border-color: var(--verde-claro); opacity: 1; }
.ag-fila { display: flex; align-items: center; gap: 10px; padding: 12px; }
.ag-check { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; border: 3px solid var(--verde-claro); background: #fff; color: #fff; font-size: 22px; font-weight: 800; }
.ag-tarea.hecha .ag-check { background: var(--verde-claro); }
.ag-info { flex: 1; text-align: left; background: none; border: none; color: var(--texto); display: flex; flex-direction: column; gap: 2px; padding: 0; }
.ag-info strong { font-size: 16px; }
.ag-info small { color: var(--tenue); font-size: 13px; }
.ag-mini { height: 6px; background: var(--borde); border-radius: 6px; overflow: hidden; margin-top: 4px; max-width: 160px; }
.ag-mini span { display: block; height: 100%; background: var(--verde-claro); }
.ag-detalle { padding: 0 14px 14px 62px; }
.ag-nota { font-size: 14px; color: var(--tenue); margin-bottom: 8px; white-space: pre-wrap; }
.ag-paso { display: flex; gap: 10px; align-items: center; padding: 8px 0; font-size: 15px; border-bottom: 1px dashed var(--borde); }
.ag-paso input { width: 22px; height: 22px; accent-color: var(--verde); }
.ag-paso.hecho { color: var(--tenue); text-decoration: line-through; }
.ag-nueva { margin-top: 6px; }
.ag-vacio { text-align: center; }
.ag-plantillas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.ag-iconos { display: flex; flex-wrap: wrap; gap: 6px; margin: -4px 0 14px; }
.ag-iconos button { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--borde); background: #fff; font-size: 20px; }
.ag-iconos button.sel { border: 2px solid var(--verde); background: var(--verde-suave); }
.ag-segmento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ag-segmento button, .ag-dias-semana button { border: 1px solid var(--borde); background: #fff; border-radius: 10px; padding: 10px 4px; font-weight: 600; color: var(--texto); }
.ag-segmento button.sel, .ag-dias-semana button.sel { background: var(--verde); color: #fff; border-color: var(--verde); }
.ag-dias-semana { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 8px; }
.ag-dias-semana button { padding: 8px 0; font-size: 13px; }
.ag-paso-edit { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.ag-paso-edit span { width: 20px; color: var(--tenue); font-size: 14px; }
.ag-paso-edit input, .ag-paso-nuevo input { flex: 1; font: inherit; font-size: 16px; padding: 9px 10px; border: 1px solid var(--borde); border-radius: 10px; min-width: 0; }
.ag-paso-edit button { width: 36px; height: 36px; border: 1px solid var(--borde); background: #fff; border-radius: 8px; }
.ag-paso-nuevo { display: flex; gap: 6px; }
.ag-logros { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ag-logro { border: 1px solid var(--borde); border-radius: 12px; padding: 10px; text-align: center; display: flex; flex-direction: column; gap: 2px; }
.ag-logro span { font-size: 30px; }
.ag-logro small { color: var(--tenue); font-size: 12px; }
.ag-logro.pendiente { filter: grayscale(1); opacity: 0.45; }
.ag-confeti { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.ag-confeti span { position: absolute; top: 55%; font-size: 30px; animation: ag-sube 1.6s ease-out forwards; }
.ag-confeti p { position: absolute; top: 40%; left: 50%; transform: translateX(-50%); background: var(--verde); color: #fff; padding: 10px 18px; border-radius: 20px; font-weight: 700; white-space: nowrap; animation: ag-aparece 1.6s ease-out forwards; }
@keyframes ag-sube { 0% { transform: translateY(0) scale(0.6); opacity: 1; } 100% { transform: translateY(-260px) scale(1.2) rotate(25deg); opacity: 0; } }
@keyframes ag-aparece { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
/* Enfoque */
.enf-opciones { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; }
.enf-op { border: 1px solid var(--borde); background: #fff; border-radius: 14px; padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--texto); }
.enf-op strong { font-size: 22px; color: var(--verde); }
.enf-op span { font-size: 13px; color: var(--tenue); }
.enf-op small { font-size: 12px; color: var(--tenue); }
.enf-fase { text-align: center; font-weight: 700; font-size: 17px; color: var(--verde); }
.enf-activo.descanso .enf-fase { color: #b45309; }
.enf-reloj { position: relative; width: 230px; height: 230px; margin: 14px auto; }
.enf-reloj svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.enf-fondo { fill: none; stroke: var(--borde); stroke-width: 8; }
.enf-arco { fill: none; stroke: var(--verde-claro); stroke-width: 8; stroke-linecap: round; transition: stroke-dashoffset 0.5s linear; }
.enf-activo.descanso .enf-arco { stroke: #f59e0b; }
.enf-reloj span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 46px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ag-cita { display: flex; gap: 12px; align-items: center; background: #eef4ff; border: 1px solid #c7d7fe; border-radius: 14px; padding: 12px; margin: 10px 0 0; }
.ag-cita strong { display: block; font-size: 16px; color: #1e3a8a; }
.ag-cita small { color: #475569; font-size: 13px; }
.ag-cita-icono { width: 40px; height: 40px; flex-shrink: 0; border-radius: 50%; background: #dbe6ff; display: flex; align-items: center; justify-content: center; font-size: 22px; }
.ag-cita.hecha { opacity: 0.6; }
.modo-terapeuta .p-cabecera { background: #0b3c5d; }

/* Ficha de ingreso: acceso para quien ya es paciente */
.ing-ya-paciente { display: flex; flex-direction: column; gap: 12px; border: 2px solid var(--verde-claro); }
.ing-btn-grande { text-decoration: none; text-align: center; font-size: 17px; padding: 14px 18px; display: block; }
.ing-separador { display: flex; align-items: center; gap: 12px; color: var(--tenue); font-size: 14px; margin: 6px 0 14px; }
.ing-separador::before, .ing-separador::after { content: ''; flex: 1; height: 1px; background: var(--borde); }

/* ===== Pensamientos trampa (distorsiones cognitivas) ===== */
.dc-intro p { margin-top: 8px; font-size: 15px; }
.dc-pasos h3 { margin-top: 0; }
.dc-pasos ol { padding-left: 22px; font-size: 15px; line-height: 1.7; }
.dc-herramientas { margin: 4px 0 12px; display: flex; flex-direction: column; gap: 8px; }
.dc-herramientas input { font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 12px; background: #fff; width: 100%; }
.dc-item { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); margin-bottom: 10px; overflow: hidden; }
.dc-item[open] { border-color: var(--verde-claro); }
.dc-item summary { list-style: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; }
.dc-item summary::-webkit-details-marker { display: none; }
.dc-mini svg { width: 52px; height: 52px; display: block; }
.dc-titulo { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.dc-titulo strong { font-size: 16px; color: var(--texto); }
.dc-titulo small { font-size: 13px; color: var(--tenue); }
.dc-flecha { font-size: 26px; color: var(--tenue); transition: transform 0.2s; }
.dc-item[open] .dc-flecha { transform: rotate(90deg); }
.dc-cuerpo { padding: 0 18px 18px; }
.dc-grande svg { width: 150px; height: 150px; display: block; margin: 4px auto 6px; }
.dc-otro { text-align: center; font-size: 13px; color: var(--tenue); font-style: italic; }
.dc-cuerpo h3 { font-size: 15px; color: var(--verde); margin: 14px 0 4px; }
.dc-cuerpo p, .dc-cuerpo li { font-size: 15px; }
.dc-ejemplos, .dc-preguntas { padding-left: 20px; line-height: 1.6; }
.dc-ejemplos li::marker { content: '💭 '; }
.dc-preguntas li::marker { content: '❓ '; }
.dc-alternativa { margin-top: 14px; background: var(--verde-suave); border-left: 4px solid var(--verde-claro); border-radius: 10px; padding: 12px 14px; font-size: 15px; color: #134e48; }
.dc-alternativa span { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; color: var(--verde); }
.dc-final .p-btn { flex: 1; text-align: center; }
.dc-pasos summary { cursor: pointer; font-size: 15px; color: var(--verde); }
.dc-pasos ol { margin-top: 10px; }

/* ===== Registro de pensamientos ===== */
.rp-emociones { display: flex; flex-wrap: wrap; gap: 8px; }
.rp-emo { border: 1px solid var(--borde); background: #fff; border-radius: 20px; padding: 8px 12px; font-size: 14px; color: var(--texto); }
.rp-emo.sel { background: var(--verde); color: #fff; border-color: var(--verde); }
.rp-int { display: grid; grid-template-columns: 110px 1fr 28px; align-items: center; gap: 10px; margin-top: 10px; font-size: 14px; }
.rp-int input { width: 100%; accent-color: var(--verde); }
.rp-int strong { text-align: right; color: var(--verde); font-size: 17px; }
.rp-int-despues { grid-template-columns: 1fr; }
.rp-int-despues input { grid-column: 1; }
.rp-int-despues strong { text-align: left; }
.rp-cita { font-size: 16px; font-style: italic; }
.rp-cita span { display: block; font-style: normal; font-size: 12px; font-weight: 700; color: var(--verde); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.rp-validacion { background: var(--verde-suave); color: #134e48; border-radius: 12px; padding: 10px 14px; margin-bottom: 12px; font-size: 15px; }
.rp-dist p { font-size: 15px; margin: 8px 0; }
.rp-dist-cab { display: flex; gap: 12px; align-items: center; }
.rp-dist-cab strong { display: block; font-size: 16px; }
.rp-dist-cab small { color: var(--tenue); font-size: 13px; }
.rp-dist-img svg { width: 56px; height: 56px; display: block; }
.rp-dist .p-btn { margin-top: 6px; }
.rp-hist summary { cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.rp-hist summary small { color: var(--tenue); }
.rp-hist p { font-size: 14px; margin-top: 8px; }
.rp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rp-chips em { font-style: normal; font-size: 12px; background: var(--ambar-suave); color: #7a4a00; border-radius: 10px; padding: 2px 8px; }
.rp-chips em.rp-emo-chip { background: var(--verde-suave); color: var(--verde); }
.rp-op-titulo { font-weight: 700; font-size: 15px; color: var(--texto); margin: 4px 0 8px; }
.rp-op-titulo span { display: block; font-weight: 400; font-size: 13px; color: var(--tenue); }
.rp-opciones { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.rp-opcion { text-align: left; border: 1px solid var(--borde); background: #fbfaf7; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; color: var(--texto); font-size: 15px; }
.rp-opcion small { font-size: 12px; font-weight: 700; color: var(--verde); }
.rp-opcion em { font-style: normal; font-size: 13px; font-weight: 600; color: var(--verde); align-self: flex-end; }
.rp-opcion.sel { border: 2px solid var(--verde-claro); background: var(--verde-suave); }
.rp-opcion.sel em::before { content: '✓ '; }
.rp-cita mark { background: #fff1d6; color: inherit; border-bottom: 2px solid #f59e0b; border-radius: 3px; padding: 0 2px; font-style: normal; }
.rp-cita mark sup { font-size: 11px; font-weight: 700; color: #b45309; margin-left: 2px; }
.rp-resumen { border: 2px solid #f5c66b; background: #fffaf0; }
.rp-resumen-tit { font-weight: 700; font-size: 16px; margin-bottom: 8px; }
.rp-resumen ol { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.rp-resumen li { font-size: 15px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.rp-resumen li small { color: var(--tenue); font-size: 13px; }
.rp-num { width: 22px; height: 22px; border-radius: 50%; background: #f59e0b; color: #fff; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; align-self: center; }
.rp-etiqueta { display: block; font-size: 11px !important; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #b45309 !important; }

/* ---------- Registro del menor ---------- */
.rm-resp { border: 1px solid var(--borde); border-radius: 12px; padding: 12px 12px 4px; margin-bottom: 12px; background: #fff; }
.rm-resp.hidden { display: none; }

/* ---------- Pie de derechos ---------- */
.pie-derechos { text-align: center; font-size: 12px; color: var(--tenue, #6b7280); padding: 18px 16px 26px; line-height: 1.5; }