html {
    font-size: 14px;
}


:root {
    --gris-1: #F2F2F2; /* gris claro con opacidad */
    --gris-1-hover: #E6E6E6CC;
    --verde-boton-anadir: #0F4F60BB;
    --verde-boton-anadir-hover: #0c3f4d;
    --brand: #0F4F60;
}

.aside-left {
    width: 300px;
    padding-left: 1rem;
}

    .aside-left .brand {
        height: 100px;
        background: #f8f9fa;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 1rem;
    }

    .brand a {
        text-decoration: none;
    }

.brand__logo {
    width: 242px;
    height: 82px;
    margin: 15px 0;
   /* falta darle transparencia*/
}

.brand__text {
    font-family: 'Cinzel', serif;
    font-size: 24px;
    line-height: 1;
    text-transform: uppercase;
    color: var(--brand);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-width: 154px;
    padding: 0 16px;
    box-sizing: border-box;
    text-decoration: none;
}


@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
    position: relative;
    min-height: 100%;
}

input[type="checkbox"] {
    accent-color: grey;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

.card {
    border-radius: 1rem;
}

dl dt {
    font-weight: 500;
}

dl dd {
    margin-left: 0;
}

dd {
    margin-top: .5rem;
}

.card-title {
    font-size: 1.1rem;
}

.custom-tabs {
    border-bottom: 1px solid #000;
}

    /* enlaces */
    .custom-tabs .nav-link {
        border: none;
        border-radius: 0;
        position: relative;
        padding-bottom: 0.5rem;
        color: #000;
        font-weight: 500;
    }

        /* pestaña activa: texto más fuerte */
        .custom-tabs .nav-link.active {
            font-weight: 600 !important;
        }

            /* subrayado grueso solo en activa */
            .custom-tabs .nav-link.active::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: -1px; /* que quede justo sobre la línea base */
                height: 3px;
                background-color: #000;
                border-radius: 2px;
            }

/* Asegura que horas y minutos se alineen */
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field,
input[type="time"]::-webkit-datetime-edit-text {
    padding: 0 2px;
}

aside svg {
    width: 1.3rem;
    height: auto;
    flex-shrink: 0;
    margin-right: 1rem;
}

#tablaPacientes {
    border: 1px solid #ADADAD;
    border-radius: 20px;
    border-collapse: separate;
    border-spacing: 0;
    overflow: hidden;
    padding: 5px;
}

    #tablaPacientes td, th {
        border-style: unset;
    }

    #tablaPacientes td {
        border-top: 1px solid #ADADAD;
    }

.bg-gris {
    background-color: var(--gris-1);
}

.form-control:focus {
    box-shadow: none;
    border-color: var(--gris-1-hover);
}

.bg-gris-oscuro {
    background-color: var(--gris-1-hover) !important;
}

/* CSS DUPLICAR CLASES */
.datepicker-inline, .datepicker-inline .datepicker-days, .datepicker-inline .datepicker-days .table-condensed{
    width: 100% !important;
}

.input-group {
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
}

.input-buscar {
    border: none !important;
    background-color: var( --gris-1);
    flex: 1 1 auto;
    min-width: 0;
}

    .input-buscar:focus-visible {
        outline: none;
    }

.filtro-container {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.filtro-select {
    padding: 0.5rem 1.rem;
    background-color: var(--gris-1, #f2f2f2cc);
    border: none;
    border-radius: 2rem;
    font-size: 0.95rem;
    cursor: pointer;
    max-width: fit-content; /* o una medida fija pequeña si prefieres */
    text-align: left;
}


    .filtro-select:focus-visible {
        border-color: none;
    }

    .filtro-select:hover {
        background-color: var(--gris-1-hover, #e6e6e6cc);
    }

.btn-Anadir {
    background-color: var(--verde-boton-anadir);
    color: white;
}

    .btn-Anadir:hover {
        color: white;
        background-color: var(--verde-boton-anadir-hover);
    }

.marcado{
    border: 5px solid #f5ff00;
    border-radius: 8px;
    padding: 5px;
}


/* Contenedor de la lista */
.contenedor-detalles-paciente {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: inherit;
}


.linea-paciente {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.5rem;
    border-bottom: 1px solid #A7A7A7;
}

    .linea-paciente.first {
        border-top: 1px solid #A7A7A7;
        padding-top: 1rem;
    }

.titulo-linea {
    margin-right: 4rem;
    font-size: 0.9rem;
    color: #9A9A9A;
}

.datos-linea {
    font-size: 0.9rem;
    font-weight: 500;
    flex-direction: column;
    align-items: start !important;
    justify-content: space-between;
}

/* Filas con separador */
.clase-editor .fila-clase {
    padding: 12px 0;
    border-bottom: 1px solid #e9e6e3;
    
}

    .clase-editor {
        padding-top: 0;
    }

    .clase-editor .fila-clase:last-child {
        border-bottom: 0;
    }

/* Etiquetas */
.clase-editor .etiqueta-clase {
    font-weight: 400;
    color: #222;
    display: flex;
    align-items: center;
}

/* Zona de datos */
.clase-editor .dato-clase {
    display: flex;
    align-items: center;
}

/* Inputs “fantasma” */
.clase-editor .input-clase {
    width: 100%;
    border: 0 !important;
    background: transparent;
    padding: 0;
    font: inherit;
    color: inherit;
    outline: 0;
}

/* Grid: 1 columna para nombre, 7 para días, 1 para acción */
.asignados-grid {
    display: grid;
    grid-template-columns: 1fr repeat(7, 28px) 72px;
    column-gap: 12px;
    align-items: center;
    justify-items: start;
}

.asignados-header > div:nth-child(n+2):not(:last-child) {
    text-align: center;
}

.asignados-item .dia-box {
    justify-self: center;
}

/* Definimos columnas una vez y las reutilizamos */
.asignados-table {
    --name-col: 220px;
    --day-col: 20px;
    --action-col: minmax(50px, 1fr);
    --cols: var(--name-col) repeat(7, var(--day-col)) var(--action-col);
}

.asignados-header,
.asignados-row {
    display: grid;
    grid-template-columns: var(--cols);
    column-gap: 12px;
    align-items: center;
    box-sizing: border-box;
    border-bottom: 1px solid #CFCFCF;
    min-height: 35px;
}
    .asignados-row > form {
        justify-self: end;
    }

.asignados-header {
    font-weight: 600;
    padding: .5rem 0;
    color: #2b2b2b;
}

.asignados-list {
    max-height: 200px;
    overflow-y: auto;
    list-style: none;
    margin: 0;
    padding: 0 12px 0 0;
    scrollbar-gutter: stable;
}

.asignados-item {
    border-bottom: 1px solid #CFCFCF;
    padding: .6rem 0;
}

.dia-box {
    width: 20px;
    height: 20px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #CFCFCF;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1;
    background: #fff;
    justify-self: center;
}

.btn-retirar {
    color: #A7A7A7 !important;
    text-decoration: none !important;
}

.modal-cita {
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
    padding: .5rem;
}

.fila-cita {
    padding: 12px;
    border-top: 1px solid #E9E9E9;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .fila-cita:first-of-type {
        border-top: 0;
    }

    .fila-cita .etiqueta {
        display: block;
        font-size: .95rem;
        color: #333;
        margin-bottom: 6px;
        font-weight: 500;
    }

    .fila-cita .valor {
        color: #9A9A9A;
        min-width: 50%;
    }

.mobile-nav .nav-link {
    font-size: .8rem;
    line-height: 1;
    padding: .25rem .5rem;
}

.mobile-nav .tab-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

    .mobile-nav .tab-item .iconwrap {
        display: grid;
        place-items: center;
        width: 2.5rem;
        height: 2.5rem;
        border-radius: 16px;
    }

    .mobile-nav .tab-item.active .iconwrap {
        background: #0F4F601A;
    }

    .mobile-nav .tab-item svg {
        width: 1.3rem;
        height: 1.3rem;
    }

    .mobile-nav .logoMediano svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .mobile-nav .logoGrande svg {
        width: 1.7rem;
        height: 1.7rem;
    }

    .mobile-nav .tab-item .label {
        font-size: .72rem;
        line-height: 1;
    }

.icon-like, .icon-dislike {
    color: #B5B5B5;
}
    .icon-like.is-active {
        color: #0F4F60;
    }
    .icon-dislike.is-active {
        color: #0F4F60;
    }

.aceptados {
    margin-top: 1rem;
    font-size: 15px;
    font-weight: 600;
    border: solid 2px var(--verde-boton-anadir);
    border-radius: 5px;
    padding: .5rem;
}

.bg-ornament {
  position: fixed;   /* se queda pegado a la ventana */
  top: 0;
  right: 0;
  height: 100vh;     /* ocupa toda la altura visible */
  width: auto;       /* mantiene proporción */
  z-index: -1;        /* detrás del contenido */
  pointer-events: none; /* que no interfiera con clicks */
}

/* Asegura que tu contenido queda por encima del fondo */
.app-shell > main,
.app-shell > aside,
.app-shell > nav {
    position: relative;
}

.table-fixed {
    table-layout: fixed;
    width: 100%;
}

    /* ancho del 2º campo (ajusta a gusto) */
    .table-fixed th:nth-child(2),
    .table-fixed td:nth-child(2) {
        width: 25%; /* o 300px, como prefieras */
    }

/* permite saltos dentro de palabras largas */
.wrap {
    white-space: normal; /* asegura wrapping */
    overflow-wrap: anywhere; /* parte cadenas sin espacios */
    word-break: break-word; /* fallback */
    hyphens: auto; /* añade guiones si procede */
}

.otp-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.otp-modal-card {
    max-width: 520px;
    width: 100%;
    border-radius: .75rem;
}
/* Evita scroll del body mientras el modal está visible */
body.otp-modal-open {
    overflow: hidden;
}

.otp-modal-card-2 {
    width: 100%;
    max-width: 720px;
    max-height: 90vh; /* <- limita altura total del modal */
    border-radius: .75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
}

.otp-modal-header, .otp-modal-footer {
    padding: .75rem 1rem;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.075);
}

.otp-modal-footer {
    border-top: 1px solid rgba(0,0,0,.075);
    border-bottom: 0;
}

.otp-modal-body {
    padding: 1rem;
    overflow-y: auto; /* <- el cuerpo scrollea */
    flex: 1 1 auto; /* ocupa el espacio disponible */
}

.otp-modal-text {
    white-space: pre-wrap; /* respeta \n */
    overflow-wrap: anywhere; /* evita desbordes por líneas largas */
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    line-height: 1.35;
}

/* bloquea scroll del body */
.btn-close {
    appearance: none;
    border: 0;
    background: transparent;
    width: 1em;
    height: 1em;
    opacity: .6;
}

    .btn-close::before {
        content: "✕";
        display: inline-block;
        line-height: 1;
    }

    .btn-close:hover {
        opacity: 1;
    }

@media (max-width: 767.98px) {
    main .pb-5 {
        padding-bottom: 4.5rem !important;
    }
    /* altura aproximada del nav */
}

/* Adaptación para pantallas pequeñas */
@media (max-width: 576px) {
    .linea-paciente {
        flex-direction: column;
        align-items: flex-start;
    }

    .titulo-linea {
        margin-right: 0;
        margin-bottom: 0.25rem;
        width: 100%;
    }

    .datos-linea {
        width: 100%;
    }
}

@media (min-width: 768px) {
    .app-shell {
        min-height: 100vh;
    }

    /* ancho fijo del menú */
    .aside-left {
        width: 280px; /* ajusta si lo necesitas */
        position: sticky;
        top: 0;
        height: 100vh; /* ocupa toda la altura de la ventana */
        overflow-y: auto; /* scroll interno si el menú crece */
        flex: 0 0 280px; /* evita que se encoja en el d-flex */
        align-self: flex-start; /* para que sticky funcione dentro de contenedores flex */
    }

    /* que el contenido no se meta debajo del menú */
    .app-shell > main {
        flex: 1 1 auto;
        margin-left: 0; /* en sticky no hace falta empujar */
        min-width: 0;
    }
}