/* Estilo de Florece: colores, letra y botones comunes */
:root {
    --fl-done: #a7dccf;      /* completado, casillas marcadas */
    --fl-none: #ffb3a7;      /* sin hacer */
    --fl-partial: #ffd59e;   /* a medias */
    --fl-purple: #b39ddb;    /* botones y reto */
    --fl-pink: #ffc4e1;      /* objetivo */
    --fl-salmon: #ffab9d;    /* consejo */
    --fl-future: #f1f2f4;    /* próximos días del plan */
    --fl-paused: #dcdce4;    /* pausa */
    --fl-day0: #8fc6ec;      /* día 0, el día previo al plan */
}
body { font-family: 'Dosis', system-ui, sans-serif; background: #f8f9fb; }
h1, .month-title { font-weight: 300; }
.fl-btn, .fl-btn:hover, .fl-btn:focus, .fl-btn:active { background: var(--fl-purple); border-color: var(--fl-purple); color: #fff; font-weight: 600; }
.fl-btn:hover { filter: brightness(.95); }
.fl-link, .fl-link:visited { color: var(--fl-purple); font-weight: 600; }
.fl-link:hover, .fl-link:focus { color: #9a80cc; }
.fl-btn-pink, .fl-btn-pink:hover, .fl-btn-pink:focus, .fl-btn-pink:active { background: var(--fl-pink); border-color: var(--fl-pink); color: #fff; font-weight: 600; }

/* Casillas y opciones marcadas en verde claro */
.form-check-input { width: 1.25em; height: 1.25em; margin-top: .1em; border-radius: .3em; }
.form-check-input:checked { background-color: var(--fl-done); border-color: var(--fl-done); }
.form-check-input:focus { border-color: var(--fl-done); box-shadow: 0 0 0 .2rem rgba(167, 220, 207, .45); }
.form-check-label, .form-check { font-size: 1.05rem; }

/* Cajas de color del detalle del día */
.fl-box { border-radius: .4rem; padding: 1rem 1.2rem; color: #fff; margin-bottom: 1rem; }
.fl-box-objetivo { background: var(--fl-pink); }
.fl-box-reto { background: #ae9cc9; }
.fl-box-consejo { background: var(--fl-salmon); }
.fl-box-week-end { background: #fff; color: inherit; border: 1px solid #ececf2; border-left: 4px solid var(--fl-purple); }
.fl-box-day-zero { background: #fff; color: inherit; border: 1px solid #ececf2; border-left: 4px solid var(--fl-day0); }
.fl-box-pay { background: #fff; color: inherit; border: 1px solid #ececf2; border-left: 4px solid var(--fl-partial); }
.fl-box .form-check-input:not(:checked) { background-color: #fff; border-color: #fff; }

/* Páginas con <body class="fl-theme">: los colores de Bootstrap pasan a ser los de Florece */
.fl-theme {
    --bs-primary-rgb: 179, 157, 219;
    --bs-success-rgb: 167, 220, 207;
    --bs-warning-rgb: 255, 213, 158;
    --bs-danger-rgb: 255, 179, 167;
    --bs-info-rgb: 255, 196, 225;
    --bs-progress-bar-bg: var(--fl-purple);
    --bs-link-color-rgb: 154, 128, 204;
    --bs-link-hover-color-rgb: 126, 103, 184;
}
/* Texto de color legible sobre fondo claro */
.fl-theme .text-success { color: #3f9c85 !important; }
.fl-theme .text-warning, .fl-theme .text-warning-emphasis { color: #c9892a !important; }
.fl-theme .text-danger { color: #e0705f !important; }
.fl-theme .text-primary { color: #8e74c4 !important; }
.fl-theme .text-bg-warning { color: #7a5a1e !important; }
.fl-theme .text-bg-info { color: #fff !important; }
.fl-theme .border-danger { border-color: var(--fl-none) !important; }
/* Botones */
.fl-theme .btn { font-weight: 600; }
.fl-theme .btn-primary, .fl-theme .btn-info, .fl-theme .btn-secondary {
    --bs-btn-bg: var(--fl-purple); --bs-btn-border-color: var(--fl-purple); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #a58ad3; --bs-btn-hover-border-color: #a58ad3; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #9a80cc; --bs-btn-active-border-color: #9a80cc; --bs-btn-active-color: #fff;
}
.fl-theme .btn-success {
    --bs-btn-bg: var(--fl-done); --bs-btn-border-color: var(--fl-done); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #93d1c2; --bs-btn-hover-border-color: #93d1c2; --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #86c9b9; --bs-btn-active-border-color: #86c9b9; --bs-btn-active-color: #fff;
}
.fl-theme .btn-warning {
    --bs-btn-bg: var(--fl-partial); --bs-btn-border-color: var(--fl-partial); --bs-btn-color: #7a5a1e;
    --bs-btn-hover-bg: #ffca85; --bs-btn-hover-border-color: #ffca85; --bs-btn-hover-color: #7a5a1e;
    --bs-btn-active-bg: #ffc070; --bs-btn-active-border-color: #ffc070; --bs-btn-active-color: #7a5a1e;
}
.fl-theme .btn-danger {
    --bs-btn-bg: var(--fl-none); --bs-btn-border-color: var(--fl-none); --bs-btn-color: #fff;
    --bs-btn-hover-bg: #ff9f90; --bs-btn-hover-border-color: #ff9f90; --bs-btn-hover-color: #fff;
}
.fl-theme .btn-outline-secondary, .fl-theme .btn-outline-info {
    --bs-btn-color: #8e74c4; --bs-btn-border-color: var(--fl-purple);
    --bs-btn-hover-bg: var(--fl-purple); --bs-btn-hover-border-color: var(--fl-purple); --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #9a80cc; --bs-btn-active-color: #fff;
}
.fl-theme .btn-outline-danger {
    --bs-btn-color: #e0705f; --bs-btn-border-color: var(--fl-none);
    --bs-btn-hover-bg: var(--fl-none); --bs-btn-hover-border-color: var(--fl-none); --bs-btn-hover-color: #fff;
}
.fl-theme .card { border-color: #ececf2; }
.fl-theme .alert-success { --bs-alert-bg: #e3f4ef; --bs-alert-border-color: var(--fl-done); --bs-alert-color: #2f7766; }
.fl-theme .alert-warning { --bs-alert-bg: #fff3e0; --bs-alert-border-color: var(--fl-partial); --bs-alert-color: #7a5a1e; }
.fl-theme .progress, .fl-theme .progress-stacked { --bs-progress-bar-bg: var(--fl-purple); }

/* Páginas de gestión (<body class="fl-theme fl-admin">): mismas tarjetas blancas que el calendario */
.fl-admin .container { max-width: 1140px; padding-bottom: 2rem; }
.fl-admin h1 { margin-bottom: 1.25rem; }
.fl-admin h2 { font-size: 1.25rem; font-weight: 600; color: #8e74c4; margin: 1.75rem 0 .75rem; }
.fl-admin .container > form,
.fl-admin .container > table,
.fl-admin .container > .table-responsive {
    background: #fff; border: 1px solid #ececf2; border-radius: .5rem; padding: 1rem 1.25rem;
    box-shadow: 0 1px 3px rgba(60, 60, 90, .05); margin-bottom: 1rem;
}
.fl-admin .container > form label:not(.form-check-label) { font-weight: 600; margin-bottom: .25rem; }
.fl-admin .table { --bs-table-bg: transparent; margin-bottom: 0; }
.fl-admin .table > thead th { background: #eef8f5; color: #2f7766; font-weight: 600; border-bottom-color: var(--fl-done); }
.fl-admin .table > tbody tr:hover > * { background: #faf8fd; }
.fl-admin p.text-danger, .fl-admin p.text-success { padding: .6rem 1rem; border-radius: .4rem; font-weight: 600; }
.fl-admin p.text-success { background: #e3f4ef; }
.fl-admin p.text-danger { background: #ffeeea; }
.fl-admin .form-control:focus, .fl-admin .form-select:focus { border-color: var(--fl-purple); box-shadow: 0 0 0 .2rem rgba(179, 157, 219, .3); }

/* Inicio de sesión */
.fl-login .container { max-width: 400px; margin-top: 12vh; }
.fl-login h1 { text-align: center; color: #8e74c4; font-size: 2.5rem; margin-bottom: 1.5rem; }
.fl-login-logo { display: block; width: 96px; height: 96px; margin: 0 auto .75rem; }

/* Logo y nombre arriba de la página de inicio */
.fl-brand { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; text-decoration: none; }
.fl-brand img { width: 44px; height: 44px; }
.fl-brand span { font-size: 1.6rem; font-weight: 300; color: #8e74c4; letter-spacing: .02em; }
.fl-login form { background: #fff; border: 1px solid #ececf2; border-radius: .5rem; padding: 1.5rem; box-shadow: 0 1px 3px rgba(60, 60, 90, .05); }
.fl-login label { font-weight: 600; margin-bottom: .25rem; }

/* Móvil */
@media (max-width: 767.98px) {
    /* Tablas class="fl-stack": cada fila es una tarjeta y cada celda lleva su título a la izquierda */
    table.fl-stack > thead { display: none; }
    table.fl-stack, table.fl-stack > tbody, table.fl-stack > tbody > tr, table.fl-stack > tbody > tr > td { display: block; width: 100%; }
    table.fl-stack > tbody > tr { border-bottom: 1px solid #ececf2; padding: .6rem 0; }
    table.fl-stack > tbody > tr:last-child { border-bottom: 0; }
    table.fl-stack > tbody > tr > td { border: 0; padding: .25rem 0 .25rem 38%; position: relative; text-align: left !important; min-height: 1.6rem; overflow-wrap: anywhere; }
    table.fl-stack > tbody > tr > td:not([data-label]) { padding-left: 0; }
    table.fl-stack > tbody > tr > td[data-label]::before {
        content: attr(data-label); position: absolute; left: 0; top: .3rem; width: 35%;
        font-size: .8rem; font-weight: 600; color: #8e74c4; white-space: normal;
    }
    table.fl-stack > tbody > tr > td > .progress, table.fl-stack > tbody > tr > td > .progress-stacked { min-width: 0; max-width: 220px; }
    table.fl-stack .btn { margin: .15rem .15rem .15rem 0; }
    .table-responsive:has(> table.fl-stack) { overflow-x: visible; }
    .fl-admin .table > tbody tr:hover > * { background: transparent; }
}
@media (max-width: 575.98px) {
    h1 { font-size: 1.75rem; }
    .fl-admin .container > form, .fl-admin .container > .table-responsive { padding: .75rem 1rem; }
    .modal-dialog { margin: .5rem; }
}

/* Contenido de la semana del plan (marco teórico, mentalidad, movimiento y alimentación) */
.fl-week-sec { background: #fff; border: 1px solid #ececf2; border-left: 5px solid var(--fl-purple); border-radius: .4rem; padding: .65rem .9rem; margin-bottom: .6rem; }
.fl-week-sec h3, .fl-week-sec summary { font-size: 1.05rem; font-weight: 600; margin: 0; color: #555; }
.fl-week-sec summary { cursor: pointer; }
.fl-week-sec .fl-week-title { font-weight: 500; color: #333; }
.fl-week-sec p { margin: .4rem 0 0; line-height: 1.4; }
.fl-week-marco { border-left-color: var(--fl-purple); }
.fl-week-mentalidad { border-left-color: var(--fl-pink); }
.fl-week-movimiento { border-left-color: var(--fl-done); }
.fl-week-alimentacion { border-left-color: var(--fl-salmon); }

/* Comentarios del supervisor */
.fl-comment { margin-bottom: 1rem; }
.fl-comment-item { background: #fff8e8; border: 1px solid var(--fl-partial); border-radius: .4rem; padding: .6rem .9rem; margin-bottom: .5rem; }
.fl-comment-head { font-size: .85rem; font-weight: 600; color: #a0752a; margin-bottom: .2rem; }

/* Gráficas (SVG en línea, includes/charts.php) */
.fl-chart-figure { margin: 0 0 1rem; }
.fl-chart { width: 100%; position: relative; }
.fl-chart svg { display: block; overflow: visible; }
.fl-chart-tip { position: absolute; display: none; pointer-events: none; z-index: 5; white-space: nowrap; background: #fff; border: 1px solid #d9cff3; border-radius: .35rem; box-shadow: 0 2px 8px rgba(60, 40, 110, .15); padding: .2rem .5rem; font-size: .85rem; color: #333; }
.fl-chart-hit { cursor: pointer; outline: none; }
.fl-chart-hit:focus { stroke: #7e67b8; stroke-width: 2; }
.fl-chart-axis { font-size: 11px; fill: #6b6a66; font-family: inherit; }
.fl-chart-label { font-size: 12px; fill: #3d3c39; font-weight: 600; font-family: inherit; }
.fl-chart-legend { display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .85rem; color: #555; margin-bottom: .3rem; }
.fl-chart-legend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.fl-chart-table { margin-top: .25rem; }
.fl-chart-table summary { cursor: pointer; }
.fl-chart-box { background: #fff; border: 1px solid #ececf2; border-radius: .5rem; padding: .8rem 1rem; margin-bottom: 1rem; }
.fl-chart-box h3 { font-size: 1.1rem; font-weight: 600; color: #555; margin-bottom: .5rem; }

/* Notas solo para el equipo, mensajes editados o borrados y sus botones */
.fl-badge-team { background: #ece7f7; color: #5b4a8b; font-weight: 600; }
.fl-edited { font-size: .75rem; font-style: italic; color: var(--bs-secondary-color); margin-left: .25rem; }
.fl-deleted { font-style: italic; color: var(--bs-secondary-color); }
.fl-msg-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .1rem .8rem; margin-top: .3rem; font-size: .85rem; }
.fl-msg-actions .btn-link { font-size: .85rem; text-decoration: none; }
.fl-msg-edit { flex-basis: 100%; order: -1; }
.fl-msg-edit:not([open]) { flex-basis: auto; order: 0; }
.fl-msg-edit > summary { list-style: none; }
.fl-msg-edit > summary::-webkit-details-marker { display: none; }
.fl-comment-item.fl-team-note { background: #f3f1f8; border: 1px dashed #b7aad6; }

/* Avisos de mensajes nuevos o sin responder (más fuertes que el rojo pastel del tema, para que se lean bien) */
.fl-badge-new { background: #c9443a; color: #fff; }
a.fl-badge-new:hover { color: #fff; background: #ad362d; }
/* Plan en pausa esperando el pago aplazado */
.fl-badge-pay { background: #fff1dc; color: #8a5a12; border: 1px solid var(--fl-partial); font-weight: 600; }

/* Ajustes plegados de un plan asignado (medidas y pausas para el pago) */
.fl-settings > summary { cursor: pointer; list-style: none; }
.fl-settings > summary::-webkit-details-marker { display: none; }
.fl-settings[open] > summary .fl-when-closed { display: none; }

/* Medidas de un plan en la ficha: marcadas, solo para consultar */
.fl-check-readonly .form-check-input:disabled,
.fl-check-readonly .form-check-input:disabled ~ .form-check-label { opacity: 1; cursor: default; }

/* Detalle del día: vídeos con miniatura, documentos con icono y explicación de las tareas en una ventana */
.fl-media-item { display: inline-block; vertical-align: top; width: 260px; max-width: 100%; margin-right: .75rem; }
.fl-video { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: .5rem; overflow: hidden; background: #2d2640; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .18); }
.fl-video img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.fl-video:hover img, .fl-video:focus-visible img { transform: scale(1.04); }
.fl-video-plain { background: linear-gradient(135deg, var(--fl-purple), #7e67b8); }
.fl-video-play { position: absolute; left: 50%; top: 42%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.fl-video-play::after { content: ''; position: absolute; left: 20px; top: 16px; border-style: solid; border-width: 10px 0 10px 16px; border-color: transparent transparent transparent #7e67b8; }
.fl-video-title { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .65rem .45rem; color: #fff; font-weight: 600; text-align: left; line-height: 1.2; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); }
.fl-doc { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; max-width: 600px; padding: .55rem .8rem; background: #fff; border: 1px solid #ececf2; border-radius: .5rem; }
.fl-doc-icon { flex: none; line-height: 0; color: #7e67b8; }
.fl-doc-body { display: flex; flex-direction: column; flex: 1 1 12rem; min-width: 0; }
.fl-doc-name { font-weight: 600; color: #5b4a8b; text-decoration: none; }
a.fl-doc-name:hover { text-decoration: underline; }
.fl-doc-meta { font-size: .8rem; color: var(--bs-secondary-color); overflow-wrap: anywhere; }
.fl-doc-actions { display: flex; gap: .4rem; margin-left: auto; }
.fl-doc-missing .fl-doc-icon { color: #c9c9d3; }
.fl-doc-missing .fl-doc-name { color: var(--bs-secondary-color); font-weight: 500; }
.fl-info-btn { width: 1.9rem; height: 1.9rem; margin-left: .3rem; padding: 0; border: 0; border-radius: 50%; background: #f1ecfb; font-size: 1rem; line-height: 1; vertical-align: middle; cursor: pointer; }
.fl-info-btn:hover, .fl-info-btn:focus-visible { background: var(--fl-purple); }
@media (max-width: 575.98px) {
    .fl-media-item { display: block; width: 100%; margin-right: 0; }
}
.fl-keycap { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4em; height: 1.4em; padding: 0 .2em; border-radius: .3em; background: var(--fl-purple); color: #fff; font-weight: 700; font-size: .9em; line-height: 1; vertical-align: .05em; }
.fl-box-destacado { background: var(--fl-pink); color: #4a3a5e; }

/* Seguimiento semanal: preguntas de la semana y respuesta del supervisor */
.fl-box-followup { background: #fff; color: inherit; border: 1px solid #ececf2; border-left: 5px solid var(--fl-purple); max-width: 760px; }
.fl-box-reply { background: #f6f1fd; color: #4a3a5e; border: 1px solid #e4daf6; border-left: 5px solid var(--fl-pink); max-width: 760px; }
.fl-followup-kicker { font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8e74c4; margin-bottom: .2rem; }
.fl-followup-phase { font-size: .85rem; color: var(--bs-secondary-color); }
.fl-followup-q { display: block; font-weight: 600; margin: .6rem 0 .25rem; }
.fl-followup-a { padding: .45rem .7rem; background: #f8f7fb; border-radius: .4rem; }
.fl-followup-status { font-size: .85rem; color: var(--bs-secondary-color); }
.fl-reply-text { font-size: 1.05rem; line-height: 1.45; }
.fl-followup-fixed { margin: 1rem 0 .2rem; padding-top: .6rem; border-top: 1px dashed #e4daf6; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #8e74c4; }
.fl-scale { display: flex; flex-wrap: wrap; gap: .3rem; }
.fl-scale .btn { min-width: 2.3rem; border: 1px solid var(--fl-purple); color: #7e67b8; background: #fff; font-weight: 600; }
.fl-scale .btn-check:checked + .btn { background: var(--fl-purple); border-color: var(--fl-purple); color: #fff; }
.fl-scale .btn-check:focus-visible + .btn { box-shadow: 0 0 0 .2rem rgba(179, 157, 219, .45); }
@media (max-width: 575.98px) {
    .fl-scale { flex-wrap: nowrap; gap: .2rem; }
    .fl-scale .btn { flex: 1 1 0; min-width: 0; padding: .25rem 0; }
}