/* ==========================================================================
   KARA Rutinas IA - Tema pastel propio
   Paleta de la marca: rosa, nude y crema, con acentos menta y lila.
   ========================================================================== */
:root {
    --kr-bg:        #faf7f4;
    --kr-surface:   #ffffff;
    --kr-rosa:      #e091aa;
    --kr-rosa-d:    #c9758f;
    --kr-rosa-soft: #f6e9ec;
    --kr-nude:      #d8cbbe;
    --kr-crema:     #fcf9f5;
    --kr-mint:      #b8e0d2;
    --kr-lila:      #d6c8f0;
    --kr-peach:     #ffd6c4;
    --kr-ok:        #7ac9a7;
    --kr-warn:      #e8b06a;
    --kr-error:     #e79a9a;
    --kr-text:      #4a4048;
    --kr-muted:     #948a92;
    --kr-border:    #ece5e7;
    --kr-radius:    14px;
    --kr-shadow:    0 6px 20px rgba(160, 130, 145, .12);
}

* { box-sizing: border-box; }

body {
    background: var(--kr-bg);
    color: var(--kr-text);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    min-height: 100vh;
}

/* ==========================================================================
   Estructura: sidebar + contenido
   ========================================================================== */
.kr-shell   { display: flex; min-height: 100vh; }
.kr-sidebar {
    width: 250px; flex-shrink: 0;
    background: linear-gradient(170deg, #fff 0%, var(--kr-crema) 100%);
    border-right: 1px solid var(--kr-border);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh;
}
.kr-brand {
    padding: 1.3rem 1.25rem 1rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.4rem; font-weight: 700; letter-spacing: .1em;
    color: var(--kr-rosa); border-bottom: 1px solid var(--kr-border);
}
.kr-brand small {
    display: block; font-family: "Segoe UI", sans-serif; font-size: .68rem;
    letter-spacing: .12em; text-transform: uppercase; color: var(--kr-muted);
    font-weight: 600; margin-top: .15rem;
}
.kr-nav { padding: .8rem .7rem; overflow-y: auto; flex: 1; }
.kr-nav-sep {
    font-size: .66rem; text-transform: uppercase; letter-spacing: .1em;
    color: var(--kr-muted); font-weight: 700; padding: 1rem .6rem .4rem;
}
.kr-nav-link {
    display: flex; align-items: center; gap: .6rem;
    padding: .55rem .7rem; margin-bottom: .15rem;
    border-radius: 10px; color: var(--kr-text); text-decoration: none;
    font-size: .9rem; transition: background .15s ease, color .15s ease;
}
.kr-nav-link:hover  { background: var(--kr-rosa-soft); color: var(--kr-rosa-d); }
.kr-nav-link.active { background: var(--kr-rosa); color: #fff; font-weight: 600; }
.kr-nav-link i      { font-size: 1rem; }
.kr-sidebar-foot { padding: .8rem 1.25rem; font-size: .72rem; color: var(--kr-muted); border-top: 1px solid var(--kr-border); }

.kr-main   { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kr-topbar {
    display: flex; justify-content: space-between; align-items: center; gap: 1rem;
    padding: .9rem 1.5rem; background: var(--kr-surface);
    border-bottom: 1px solid var(--kr-border);
}
.kr-topbar-title { font-weight: 700; font-size: 1.05rem; color: var(--kr-rosa-d); }
.kr-content { padding: 1.5rem; flex: 1; }

.kr-user-btn { display: flex; align-items: center; gap: .6rem; border: none; background: none; padding: .25rem .5rem; }
.kr-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--kr-rosa); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.kr-user-meta { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.kr-user-name { font-size: .86rem; font-weight: 600; }
.kr-user-rol  { font-size: .72rem; color: var(--kr-muted); }

/* ==========================================================================
   Componentes
   ========================================================================== */
.kr-card {
    background: var(--kr-surface);
    border: 1px solid var(--kr-border);
    border-radius: var(--kr-radius);
    box-shadow: var(--kr-shadow);
}

.btn-kr {
    background: var(--kr-rosa); border: none; color: #fff;
    border-radius: 10px; padding: .5rem 1.2rem; font-size: .92rem;
    text-decoration: none; display: inline-flex; align-items: center; gap: .4rem;
    transition: background .15s ease, transform .05s ease;
}
.btn-kr:hover     { background: var(--kr-rosa-d); color: #fff; }
.btn-kr:active    { transform: translateY(1px); }
.btn-kr:disabled  { opacity: .6; }
.btn-kr.btn-sm    { padding: .3rem .8rem; font-size: .84rem; }

.form-control:focus, .form-select:focus {
    border-color: var(--kr-rosa); box-shadow: 0 0 0 .2rem rgba(224, 145, 170, .18);
}
.form-check-input:checked { background-color: var(--kr-rosa); border-color: var(--kr-rosa); }

/* ---- Modales ------------------------------------------------------------
   En un formulario alto, el max-height porcentual que trae Bootstrap para
   .modal-content no llega a encoger el .modal-body: el contenido se recorta y
   el pie (con el boton Guardar) queda fuera de la pantalla y sin scroll.
   Acotamos el cuerpo contra el viewport, que si es una altura definida: la
   cabecera y el pie quedan fijos y el cuerpo se desplaza.                    */
.modal-dialog-scrollable .modal-body {
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
}
/* Evita que la rueda del raton arrastre la pagina de fondo al llegar al final. */
.modal { overscroll-behavior: contain; }

.kr-table { --bs-table-hover-bg: var(--kr-crema); }
.kr-table thead th {
    font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--kr-muted); font-weight: 700;
    border-bottom: 2px solid var(--kr-border); background: var(--kr-crema);
}
.kr-table td { font-size: .9rem; vertical-align: middle; }

.kr-badge { display: inline-block; padding: .2rem .55rem; border-radius: 6px; font-size: .72rem; font-weight: 700; }
.kr-b-ok   { background: #e2f4ea; color: #2f7d54; }
.kr-b-info { background: #eae5f8; color: #6b52b8; }
.kr-b-def  { background: #f2eef0; color: #8a7a83; }
.kr-b-warn { background: #fbeedd; color: #96652c; }
.kr-b-off  { background: #f0f1f4; color: #6a7080; }

.kr-chip {
    display: inline-block; background: var(--kr-rosa-soft); color: var(--kr-rosa-d);
    padding: .2rem .6rem; border-radius: 999px; font-size: .78rem; font-weight: 600;
    margin: 0 .25rem .25rem 0;
}
.kr-chip-nude { background: #f3efe9; color: #8a7a68; }

.kr-sec-titulo {
    color: var(--kr-rosa-d); font-weight: 700; font-size: .95rem;
    margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--kr-border);
}
.kr-sec-titulo i { margin-right: .35rem; }

.kr-dl dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--kr-muted); font-weight: 700; }
.kr-dl dd { margin-bottom: .7rem; font-size: .9rem; }
.kr-mono  { font-family: Consolas, "Courier New", monospace; font-size: .78rem; line-height: 1.45; }
.kr-empty { text-align: center; color: var(--kr-muted); padding: 2rem 1rem; }

/* ---- Avisos ------------------------------------------------------------ */
.kr-aviso {
    display: flex; gap: .75rem; align-items: flex-start;
    padding: .85rem 1rem; border-radius: var(--kr-radius);
    border: 1px solid var(--kr-border); font-size: .9rem;
}
.kr-aviso i { font-size: 1.1rem; line-height: 1.4; }
.kr-aviso-demo   { background: #f3f0fb; border-color: #ddd4f3; color: #5c4b96; }
.kr-aviso-ok     { background: #eaf7f1; border-color: #cbe9db; color: #2f7d54; }
.kr-aviso-alerta { background: #fdf3e7; border-color: #f3ddc0; color: #92613a; }

/* ---- Metricas del panel ------------------------------------------------ */
.kr-metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .9rem; }
.kr-metrica  { border-radius: var(--kr-radius); padding: 1rem 1.1rem; border: 1px solid var(--kr-border); }
.kr-metrica-num { font-size: 1.9rem; font-weight: 700; line-height: 1; }
.kr-metrica-lbl { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin-top: .35rem; }
.kr-m-rosa  { background: var(--kr-rosa-soft); color: var(--kr-rosa-d); }
.kr-m-mint  { background: #eaf7f1; color: #2f7d54; }
.kr-m-lila  { background: #f3f0fb; color: #5c4b96; }
.kr-m-peach { background: #fdf2ec; color: #8a5236; }

/* ==========================================================================
   Login
   ========================================================================== */
.kr-login-body {
    display: flex; align-items: center; justify-content: center; min-height: 100vh;
    background: linear-gradient(150deg, var(--kr-rosa-soft) 0%, var(--kr-bg) 55%, var(--kr-crema) 100%);
    padding: 1.5rem;
}
.kr-login-card { width: 100%; max-width: 400px; background: #fff; border-radius: 18px; box-shadow: var(--kr-shadow); overflow: hidden; }
.kr-login-head { padding: 2rem 2rem 1.2rem; text-align: center; border-bottom: 1px solid var(--kr-border); }
.kr-login-logo {
    font-family: Georgia, "Times New Roman", serif; font-size: 2rem; font-weight: 700;
    letter-spacing: .14em; color: var(--kr-rosa);
}
.kr-login-head p { color: var(--kr-muted); font-size: .84rem; margin: .3rem 0 0; }
.kr-login-form  { padding: 1.5rem 2rem 2rem; }
.kr-login-error { background: #fdecec; color: #a44b4b; border-radius: 10px; padding: .6rem .9rem; font-size: .86rem; margin-bottom: 1rem; }
.kr-login-hint  { text-align: center; font-size: .76rem; color: var(--kr-muted); margin-top: 1rem; }

/* ==========================================================================
   Documento de la rutina
   ========================================================================== */
.kr-doc-cab {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem;
    padding-bottom: 1rem; margin-bottom: 1.25rem; border-bottom: 2px solid var(--kr-nude);
}
.kr-doc-titulo { font-weight: 700; color: var(--kr-rosa-d); letter-spacing: -.4px; margin: 0; font-size: 1.4rem; }
.kr-doc-sub    { color: var(--kr-muted); font-size: .86rem; margin: .25rem 0 0; }
.kr-doc-logo {
    font-family: Georgia, "Times New Roman", serif; font-size: 1.7rem; font-weight: 700;
    letter-spacing: .12em; color: var(--kr-rosa); background: var(--kr-rosa-soft);
    padding: .4rem 1.1rem; border-radius: 12px; white-space: nowrap;
}

.kr-doc-sec { margin-bottom: 1.75rem; }
.kr-doc-h {
    font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: var(--kr-rosa-d); margin-bottom: .6rem;
}
.kr-doc-p { font-size: .93rem; line-height: 1.65; margin-bottom: .6rem; }
.kr-doc-prioridades { padding-left: 1.2rem; font-size: .9rem; }
.kr-doc-prioridades li { margin-bottom: .3rem; }

.kr-ficha-medica {
    background: var(--kr-rosa-soft); border-left: 4px solid var(--kr-rosa);
    border-radius: 10px; padding: .9rem 1.1rem; font-size: .9rem;
}
.kr-ficha-ico  { margin-right: .35rem; }
.kr-ficha-nota { color: #8a5f6c; font-size: .86rem; line-height: 1.55; }

/* ---- Dias del calendario ----------------------------------------------- */
.kr-dia {
    border: 1px solid var(--kr-border); border-radius: 12px; margin-bottom: .9rem;
    overflow: hidden; background: var(--kr-surface);
    break-inside: avoid; page-break-inside: avoid;
}
.kr-dia-descanso { background: #f2faf6; border-color: #cbe9db; }
.kr-dia-cab {
    display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
    padding: .6rem .9rem; background: var(--kr-crema); border-bottom: 1px solid var(--kr-border);
}
.kr-dia-descanso .kr-dia-cab { background: #e7f6ee; border-bottom-color: #cbe9db; }
.kr-dia-nombre  { font-weight: 700; color: var(--kr-rosa-d); min-width: 5.5rem; }
.kr-dia-chip    { padding: .18rem .6rem; border-radius: 999px; font-size: .74rem; font-weight: 700; }
.kr-chip-equipo   { background: var(--kr-rosa-soft); color: var(--kr-rosa-d); }
.kr-chip-descanso { background: #d5efe1; color: #2f7d54; }
.kr-dia-enfoque { margin-left: auto; font-size: .78rem; color: var(--kr-muted); text-transform: uppercase; letter-spacing: .04em; }

.kr-dia-cuerpo { display: grid; grid-template-columns: 1fr 1fr; }
.kr-turno { padding: .8rem .9rem; }
.kr-turno + .kr-turno { border-left: 1px solid var(--kr-border); }
.kr-turno-h { font-size: .76rem; font-weight: 700; color: var(--kr-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .5rem; }
.kr-pasos { margin: 0; padding-left: 1.1rem; font-size: .86rem; }
.kr-pasos li { margin-bottom: .5rem; }
.kr-paso-t   { font-weight: 600; }
.kr-paso-min { background: var(--kr-peach); color: #8a5236; padding: .05rem .45rem; border-radius: 999px; font-size: .7rem; font-weight: 700; margin-left: .35rem; }
.kr-paso-d   { display: block; color: var(--kr-muted); font-size: .8rem; line-height: 1.45; margin-top: .15rem; }

/* ---- Recomendaciones --------------------------------------------------- */
.kr-recos { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .75rem; }
.kr-reco  { border-radius: 12px; padding: .8rem .9rem; break-inside: avoid; page-break-inside: avoid; }
.kr-reco h6 { font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .5rem; }
.kr-reco ul { margin: 0; padding-left: 1.05rem; font-size: .83rem; line-height: 1.5; }
.kr-reco li { margin-bottom: .35rem; }
.kr-reco-mint  { background: #eaf7f1; color: #2f6b52; }
.kr-reco-lila  { background: #f3f0fb; color: #57489a; }
.kr-reco-peach { background: #fdf2ec; color: #8a5236; }

.kr-doc-legal {
    font-size: .74rem; color: var(--kr-muted); line-height: 1.55;
    border-top: 1px solid var(--kr-border); padding-top: .8rem; margin: 0;
}

/* ---- Hoja de impresion -------------------------------------------------- */
.kr-print-body  { background: var(--kr-bg); }
.kr-print-barra { display: flex; gap: .5rem; justify-content: center; padding: 1rem; }
.kr-print-hoja {
    background: #fff; max-width: 900px; margin: 0 auto 2rem;
    padding: 2.2rem 2.5rem; border-radius: var(--kr-radius); box-shadow: var(--kr-shadow);
}
.kr-print-pie { font-size: .72rem; color: var(--kr-muted); text-align: center; margin-top: 1.5rem; }

@media print {
    body, .kr-print-body { background: #fff !important; }
    .kr-print-hoja { max-width: none; margin: 0; padding: 0; box-shadow: none; border-radius: 0; }
    .d-print-none { display: none !important; }
    .kr-doc-sec { margin-bottom: 1.1rem; }
    a[href]::after { content: ""; }
    @page { margin: 14mm; }
}

/* ==========================================================================
   Toasts
   ========================================================================== */
.kr-toast-wrap { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 1080; display: flex; flex-direction: column; gap: .5rem; }
.kr-toast {
    background: #fff; border-radius: 10px; padding: .7rem 1rem; font-size: .88rem;
    box-shadow: var(--kr-shadow); border-left: 4px solid var(--kr-ok);
    opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease;
}
.kr-toast.show { opacity: 1; transform: translateY(0); }
.kr-toast-err  { border-left-color: var(--kr-error); }
/* Salio bien, pero hay algo que mirar. No es un error: no va en rojo. */
.kr-toast-aviso { border-left-color: var(--kctp-aviso, #8a5a00); }

/* ==========================================================================
   Responsive
   ========================================================================== */
/* El boton de menu solo existe en pantalla chica. */
.kr-menu-btn {
    display: none; border: 1px solid var(--kr-border); background: var(--kr-surface);
    color: var(--kr-rosa-d); border-radius: 10px; padding: .35rem .55rem;
    font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.kr-menu-btn:focus-visible { outline: 2px solid var(--kr-rosa); outline-offset: 2px; }
.kr-velo { display: none; }

@media (max-width: 991.98px) {
    /* El menu lateral pasa a ser un cajon que entra desde la izquierda, en vez de
       volcarse encima del contenido y obligar a bajar por toda la navegacion. */
    .kr-menu-btn { display: inline-flex; align-items: center; }
    .kr-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; z-index: 1045;
        width: 82vw; max-width: 300px; height: 100dvh;
        transform: translateX(-100%);
        transition: transform .22s ease;
        overflow-y: auto; box-shadow: 0 0 40px rgba(74, 64, 72, .18);
    }
    .kr-sidebar.abierto { transform: translateX(0); }
    .kr-velo {
        display: block; position: fixed; inset: 0; z-index: 1040;
        background: rgba(74, 64, 72, .45);
        opacity: 0; transition: opacity .22s ease;
    }
    .kr-velo.visible { opacity: 1; }
    .kr-topbar { position: sticky; top: 0; z-index: 1030; gap: .75rem; }
    .kr-topbar-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* El nombre del usuario ocupa demasiado en pantalla chica: queda el avatar. */
    .kr-user-meta { display: none; }
}
@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
    .kr-sidebar, .kr-velo { transition: none; }
}

/* Ninguna tabla puede empujar la pagina a lo ancho: se desplaza dentro de su caja.
   El envoltorio lo pone app.js sobre cualquier tabla que no lo traiga ya. */
.kr-tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kr-tabla-scroll > .table { margin-bottom: 0; }
@media (max-width: 575.98px) {
    .kr-content { padding: 1rem; }
    .kr-dia-cuerpo { grid-template-columns: 1fr; }
    .kr-turno + .kr-turno { border-left: none; border-top: 1px solid var(--kr-border); }
    .kr-doc-cab { flex-direction: column; }
    .kr-print-hoja { padding: 1.2rem; }
}

/* ==========================================================================
   Corrector de rutinas (/rutinas/corregir/{id})
   ========================================================================== */
.kr-dia-edit { margin-bottom: 1rem; }
.kr-dia-cab-edit {
    display: grid; grid-template-columns: 6rem auto 1fr 1.4fr; align-items: center; gap: .6rem;
    padding: .6rem .9rem; background: var(--kr-crema); border-bottom: 1px solid var(--kr-border);
}
.kr-dia-edit.kr-dia-descanso .kr-dia-cab-edit { background: #e7f6ee; border-bottom-color: #cbe9db; }
.kr-dia-cab-edit .form-check { margin: 0; white-space: nowrap; }

.kr-dia-cuerpo-edit { display: grid; grid-template-columns: 1fr 1fr; }
.kr-turno-edit { padding: .8rem .9rem; }
.kr-turno-edit + .kr-turno-edit { border-left: 1px solid var(--kr-border); }

.kr-paso-edit {
    background: var(--kr-crema); border: 1px solid var(--kr-border);
    border-radius: 10px; padding: .5rem; margin-bottom: .5rem;
}
.kr-paso-edit .kr-p-min { max-width: 5.5rem; }
.kr-paso-edit .kr-p-detalle { font-size: .82rem; }
.kr-pasos-edit:empty::after {
    content: "Sin pasos. Anade el primero."; display: block;
    font-size: .82rem; color: var(--kr-muted); padding: .4rem 0;
}

@media (max-width: 991.98px) {
    .kr-dia-cab-edit { grid-template-columns: 1fr 1fr; }
    .kr-dia-cab-edit .kr-dia-nombre { grid-column: 1 / -1; }
    .kr-dia-cuerpo-edit { grid-template-columns: 1fr; }
    .kr-turno-edit + .kr-turno-edit { border-left: none; border-top: 1px solid var(--kr-border); }
}

/* ==========================================================================
   Logo del médico e imagen del análisis de piel
   ========================================================================== */
.kr-ficha-cab { display: flex; align-items: center; gap: .9rem; margin-bottom: .6rem; }
.kr-medico-logo {
    max-height: 56px; max-width: 150px; width: auto; object-fit: contain;
    background: #fff; border: 1px solid var(--kr-border);
    border-radius: 8px; padding: .25rem; flex-shrink: 0;
}

.kr-analisis-img {
    margin: .9rem 0 0; text-align: center;
    break-inside: avoid; page-break-inside: avoid;
}
.kr-analisis-img img {
    max-width: 100%; max-height: 420px; width: auto;
    border: 1px solid var(--kr-border); border-radius: 12px; background: var(--kr-crema);
}
.kr-analisis-img figcaption {
    font-size: .76rem; color: var(--kr-muted); margin-top: .35rem;
}

/* Logo del médico junto a la marca KARA en la cabecera del documento */
.kr-doc-marcas { display: flex; align-items: center; gap: .8rem; }
.kr-doc-marcas .kr-medico-logo { max-height: 48px; }

/* Cupo mensual */
.kr-cupo { font-size: .82rem; }
.kr-cupo-barra {
    height: 6px; border-radius: 999px; background: var(--kr-border);
    overflow: hidden; margin-top: .3rem;
}
.kr-cupo-barra span { display: block; height: 100%; background: var(--kr-ok); }
.kr-cupo-barra.kr-cupo-alto span  { background: var(--kr-warn); }
.kr-cupo-barra.kr-cupo-lleno span { background: var(--kr-error); }

@media print {
    .kr-analisis-img img { max-height: 300px; }
}


/* --------------------------------------------------------------------------
   Objetivo tactil en pantallas de dedo  (02-sep-2026)
   --------------------------------------------------------------------------
   Medido en 390 y 360px: el boton de usuario de la cabecera queda en 40x34 y
   varios botones de icono en 34x30. La guia pide 40. Como la cabecera es
   compartida, el mismo defecto salia repetido en las diez pantallas del panel.
   Solo se agranda donde hay dedos: con raton, 34px sobran y agrandar apretaria
   la cabecera sin motivo.                                                     */
@media (pointer: coarse) {
    .kr-shell .btn,
    .kr-shell .kr-user-btn,
    .kr-shell button:not(.kctp-btn),
    .kr-shell a.btn {
        min-height: 40px;
        min-width: 40px;
    }
    .kr-shell .btn-kr.btn-sm { padding-block: .55rem; }
}

/* El nombre del formulario se caia a 11,3px en la lista. Nada por debajo de 12. */
.kr-shell code,
.kr-shell .text-muted small,
.kr-shell small { font-size: max(.75rem, 12px); }


/* Los nombres de la lista de clientes miden 19px de alto: en una tabla que se
   recorre con el pulgar, ese es el enlace que mas se toca. Se agranda el area
   sin mover la fila. */
@media (pointer: coarse) {
    .kr-shell td a,
    .kr-shell th a {
        display: inline-block;
        padding-block: .6rem;
        margin-block: -.6rem;
    }
}