/* Argian Manager - Modulo Personal */

.am-personal {
  --am-turquesa:#559caf;
  --am-turquesa-fuerte:#317d90;
  --am-turquesa-oscuro:#215f70;
  --am-naranja:#e89b37;
  --am-azul-oscuro:#183247;
  --am-texto:#173248;
  --am-suave:#667985;
  --am-fondo:#f2f6f8;
  --am-borde:#cbd8de;
  --am-blanco:#fff;
  --am-rojo:#b54141;
  width:100%; max-width:1780px; margin:0 auto; padding:28px 32px 48px; color:var(--am-texto);
  max-width: none;
  padding: 20px 16px 48px;
}
.am-personal,.am-personal *{box-sizing:border-box}
.am-personal button,.am-personal input,.am-personal select,.am-personal textarea{font:inherit}
.am-personal-cabecera{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-bottom:24px;padding:4px 4px 18px;border-bottom:3px solid var(--am-naranja)}
.am-personal-identidad{display:flex;align-items:center;gap:18px;min-width:0}
.am-personal-logo{display:block;flex:0 0 auto;width:94px;height:94px;object-fit:contain}
.am-personal-identidad-texto{min-width:0}
.am-personal-cabecera h1{margin:0;color:var(--am-azul-oscuro);font-size:clamp(32px,3vw,46px);line-height:1.05}
.am-personal-etiqueta{margin:0 0 5px;color:#ae6415;font-size:12px;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.am-personal-subtitulo{margin:7px 0 0;color:var(--am-suave)}
.am-personal-boton{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 17px;border:1px solid transparent;border-radius:11px;cursor:pointer;font-weight:800;text-decoration:none}
.am-personal-boton-principal{border-color:var(--am-turquesa-oscuro);background:var(--am-turquesa-fuerte);color:#fff;box-shadow:0 7px 17px rgba(49,125,144,.22)}
.am-personal-boton-principal:hover{background:var(--am-turquesa-oscuro);color:#fff}
.am-personal-boton-secundario{min-height:39px;padding:8px 14px;border:1px solid var(--am-turquesa-fuerte);border-radius:9px;background:#fff;color:var(--am-azul-oscuro);cursor:pointer;font-weight:800}
.am-personal-boton-ancho{width:100%}
.am-personal-aviso{margin-bottom:20px;padding:14px 17px;border-radius:11px;font-weight:800}
.am-personal-aviso-exito{border:1px solid #8ec9b0;background:#e9f7f0;color:#205e47}
.am-personal-aviso-error{border:1px solid #d58f88;background:#fff0ee;color:#7d3029}

.am-personal-distribucion{
  display:grid;
  grid-template-columns: 155px minmax(0, 1fr) 185px;
  gap: 12px;
  align-items:start;
  width:100%;
}

.am-personal-lateral,.am-personal-central{min-width:0;border:1px solid var(--am-borde);border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(24,50,71,.08)}
.am-personal-lateral{padding:15px}.am-personal-central{width:100%;overflow:hidden}
.am-personal-panel-cabecera{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.am-personal-panel-cabecera h2{margin:0;color:var(--am-azul-oscuro);font-size:17px}
.am-personal-panel-cabecera span{display:inline-grid;min-width:28px;min-height:28px;place-items:center;padding:3px 8px;border:1px solid var(--am-borde);border-radius:999px;background:var(--am-fondo);font-size:12px;font-weight:900}
.am-personal-panel-cabecera button{display:grid;width:36px;height:36px;place-items:center;padding:0;border:1px solid var(--am-turquesa-fuerte);border-radius:9px;background:#e4f1f4;color:var(--am-turquesa-oscuro);cursor:pointer;font-size:21px;font-weight:900}
.am-personal-lista-calendarios{display:grid;gap:10px}
.am-personal-calendario-mini{overflow:hidden;border:1px solid var(--am-borde);border-radius:12px;background:#fff}
.am-personal-calendario-mini a{display:flex;align-items:center;gap:10px;padding:12px;color:var(--am-texto);text-decoration:none}
.am-personal-calendario-mini.es-activo{border:2px solid var(--am-turquesa-fuerte);background:#e8f4f6}
.am-personal-mini-icono{display:grid;flex:0 0 38px;width:38px;height:38px;place-items:center;border-radius:9px;background:#fff;color:var(--am-turquesa-oscuro);font-size:21px}
.am-personal-mini-texto{display:grid;min-width:0}.am-personal-mini-texto strong,.am-personal-mini-texto small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.am-personal-mini-texto small{margin-top:3px;color:var(--am-suave)}
.am-personal-barra-calendario{display:grid;grid-template-columns:minmax(220px,1fr) auto;align-items:center;gap:16px;padding:14px 17px;border-bottom:1px solid var(--am-borde)}
.am-personal-form-renombrar{display:flex;align-items:center;gap:8px;min-width:0}.am-personal-form-renombrar input{width:min(100%,340px);min-width:0;padding:9px 11px;border:1px solid var(--am-borde);border-radius:9px;color:var(--am-azul-oscuro);font-size:18px;font-weight:900}.am-personal-form-renombrar button{min-height:38px;padding:7px 12px;border:1px solid var(--am-turquesa-fuerte);border-radius:8px;background:#e4f1f4;color:var(--am-turquesa-oscuro);cursor:pointer;font-weight:900}
.am-personal-herramientas{display:flex;align-items:center;justify-content:flex-end;gap:8px}.am-personal-menu-contenedor{position:relative}.am-personal-menu-boton{display:grid;width:39px;height:39px;place-items:center;padding:0;border:1px solid var(--am-turquesa-fuerte);border-radius:9px;background:#fff;color:var(--am-azul-oscuro);cursor:pointer;font-size:21px;font-weight:900}
.am-personal-menu{position:absolute;z-index:70;top:calc(100% + 7px);right:0;width:205px;padding:6px;border:1px solid var(--am-borde);border-radius:11px;background:#fff;box-shadow:0 16px 38px rgba(24,50,71,.22)}.am-personal-menu[hidden]{display:none!important}.am-personal-menu button{width:100%;padding:9px 10px;border:0;border-radius:7px;background:transparent;text-align:left;cursor:pointer}.am-personal-menu button.es-peligro{color:var(--am-rojo)}
.am-personal-navegacion{display:grid;grid-template-columns:180px minmax(180px,1fr) 180px;align-items:center;gap:14px;padding:14px 17px;border-bottom:1px solid var(--am-borde);background:#f7fafb}.am-personal-navegacion h2{margin:0;color:var(--am-azul-oscuro);text-align:center;font-size:21px}.am-personal-navegacion-botones,.am-personal-vistas{display:flex;align-items:center;gap:6px}.am-personal-vistas{justify-content:flex-end}
.am-personal-navegacion-botones a,.am-personal-vistas button,.am-personal-vistas a{display:inline-grid;min-width:37px;min-height:37px;place-items:center;padding:6px 11px;border:1px solid #9fb4bd;border-radius:8px;background:#fff;color:var(--am-azul-oscuro);text-decoration:none;cursor:pointer;font-weight:900}.am-personal-vistas .es-activo{border-color:var(--am-turquesa-fuerte);background:var(--am-turquesa-fuerte);color:#fff}
.am-personal-rejilla{display:grid;grid-template-columns:repeat(7,minmax(92px,1fr));width:100%;gap:1px;background:var(--am-borde)}.am-personal-dia-semana{padding:11px 5px;background:#e6edef;color:#405762;text-align:center;font-size:11px;font-weight:900;text-transform:uppercase}.am-personal-dia{position:relative;min-width:0;min-height:138px;padding:8px;background:#fff}.am-personal-dia.es-otro-mes{background:#eef2f4;color:#71808a}.am-personal-dia.es-hoy{box-shadow:inset 0 0 0 3px var(--am-naranja)}
.am-personal-dia-numero{display:grid;width:32px;height:32px;place-items:center;margin:0 0 6px;padding:0;border:0;border-radius:999px;background:transparent;color:inherit;cursor:pointer;font-weight:900}.am-personal-dia.es-hoy .am-personal-dia-numero{background:var(--am-naranja);color:#fff}.am-personal-contenido-dia{display:grid;gap:5px}.am-personal-agregar-dia{width:100%;min-height:29px;margin-top:7px;padding:4px 5px;border:1px dashed #93b6bf;border-radius:7px;background:#f1f8f9;color:var(--am-turquesa-oscuro);cursor:pointer;font-size:11px;font-weight:800}
.am-personal-turno{position:relative;overflow:hidden;padding:7px 21px 7px 8px;border:1px solid rgba(24,50,71,.16);border-left:5px solid var(--color-persona);border-radius:7px;background:#eef6f7;font-size:11px}.am-personal-turno div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px}.am-personal-turno p{margin:4px 0 0}.am-personal-turno form,.am-personal-nota form{position:absolute;top:3px;right:3px}.am-personal-turno form button,.am-personal-nota form button{width:19px;height:19px;padding:0;border:1px solid rgba(181,65,65,.25);border-radius:999px;background:#fff;color:var(--am-rojo);cursor:pointer}.am-personal-nota{position:relative;display:flex;gap:5px;padding:7px 21px 7px 8px;border:1px solid #dfbf74;border-radius:7px;background:#fff2c7;color:#57420f;font-size:11px}.am-personal-nota p{margin:0}
.am-personal-lista-personas{display:grid;gap:9px;margin-bottom:14px}.am-personal-persona{display:flex;align-items:center;gap:8px;min-width:0;padding:9px;border:1px solid var(--am-borde);border-radius:11px}.am-personal-color{flex:0 0 11px;width:11px;height:38px;border-radius:999px}.am-personal-persona-datos{display:grid;flex:1;min-width:0}.am-personal-persona-datos strong,.am-personal-persona-datos small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.am-personal-persona-datos small{color:var(--am-suave);font-size:10px}.am-personal-reloj,.am-personal-eliminar-persona{display:grid;flex:0 0 29px;width:29px;height:29px;place-items:center;padding:0;border:1px solid var(--am-borde);border-radius:8px;background:var(--am-fondo);cursor:pointer}.am-personal-eliminar-persona{color:var(--am-rojo)}
.am-personal-vacio{padding:22px 8px;text-align:center}.am-personal-vacio p{color:var(--am-suave)}.am-personal-vacio button{padding:9px 12px;border:1px solid var(--am-turquesa-fuerte);border-radius:9px;background:#e4f1f4;color:var(--am-turquesa-oscuro);cursor:pointer;font-weight:900}
.am-personal-modal[hidden],.am-personal-modal [hidden],.am-personal-modal form[hidden]{display:none!important}.am-personal-modal{position:fixed;z-index:99999;inset:0;display:grid;place-items:center;padding:24px}.am-personal-modal-fondo{position:absolute;inset:0;background:rgba(14,31,42,.64);backdrop-filter:blur(3px)}.am-personal-modal-contenido{position:relative;z-index:1;width:min(590px,100%);max-height:calc(100vh - 48px);overflow:auto;padding:28px;border:1px solid var(--am-borde);border-radius:17px;background:#fff;box-shadow:0 25px 80px rgba(0,0,0,.32)}.am-personal-modal-pequeno{width:min(430px,100%)}.am-personal-modal-contenido h2{margin:0 55px 6px 0;color:var(--am-azul-oscuro);font-size:29px}.am-personal-modal-cerrar{position:absolute;top:17px;right:17px;display:grid;width:38px!important;height:38px!important;place-items:center;padding:0!important;border:1px solid var(--am-turquesa-oscuro);border-radius:10px;background:var(--am-turquesa-fuerte);color:#fff;cursor:pointer;font-size:20px;font-weight:900}.am-personal-fecha-seleccionada{margin:0 0 20px;color:var(--am-suave)}
.am-personal-pestanas{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:20px;padding:5px;border-radius:11px;background:var(--am-fondo)}.am-personal-pestanas button{min-height:43px;padding:9px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--am-texto);cursor:pointer;font-weight:900}.am-personal-pestanas button.es-activo{border-color:var(--am-borde);background:#fff;color:var(--am-turquesa-oscuro)}.am-personal-modal form{display:grid;gap:15px}.am-personal-modal label{display:grid;gap:7px;color:var(--am-azul-oscuro);font-size:13px;font-weight:900}.am-personal-modal input,.am-personal-modal select,.am-personal-modal textarea{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--am-borde);border-radius:9px;background:#fff;color:var(--am-texto)}.am-personal-modal textarea{min-height:100px;resize:vertical}.am-personal-form-fila{display:grid;grid-template-columns:1fr 1fr;gap:14px}.am-personal-resumen-horas{display:grid;grid-template-columns:1fr auto;gap:14px;margin-top:20px;padding:18px;border:1px solid var(--am-borde);border-radius:12px;background:var(--am-fondo)}body.am-personal-modal-abierto{overflow:hidden}
@media(max-width:1120px){.am-personal-distribucion{grid-template-columns:190px minmax(0,1fr)}.am-personal-equipo{grid-column:1/-1}.am-personal-lista-personas{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}}
@media(max-width:900px){.am-personal{padding:18px 14px 40px}.am-personal-distribucion{display:block}.am-personal-lateral,.am-personal-central{margin-bottom:15px}.am-personal-central{overflow-x:auto}.am-personal-barra-calendario,.am-personal-navegacion,.am-personal-rejilla{min-width:760px}}
@media(max-width:620px){.am-personal-cabecera{align-items:stretch;flex-direction:column}.am-personal-logo{width:68px;height:68px}.am-personal-cabecera form,.am-personal-cabecera .am-personal-boton{width:100%}.am-personal-form-fila{grid-template-columns:1fr}.am-personal-modal{padding:10px}.am-personal-modal-contenido{max-height:calc(100vh - 20px);padding:21px 17px}}
@media print{*{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}.am-personal{max-width:none;padding:0}.am-personal-cabecera form,.am-personal-calendarios,.am-personal-equipo,.am-personal-herramientas,.am-personal-agregar-dia,.am-personal-turno form,.am-personal-nota form,.am-personal-form-renombrar button,.am-personal-vistas,.am-personal-aviso{display:none!important}.am-personal-distribucion{display:block}.am-personal-central{border:0;box-shadow:none}.am-personal-rejilla{gap:0;border:1px solid #53666f}.am-personal-dia-semana,.am-personal-dia{border-right:1px solid #53666f;border-bottom:1px solid #53666f}.am-personal-dia{min-height:112px}}

/*
|--------------------------------------------------------------------------
| VISTA ANUAL COMPACTA · 4 MESES POR FILA
|--------------------------------------------------------------------------
*/

.am-personal-anio {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 16px;
    background: #f2f6f8;
}

.am-personal-mes-mini {
    min-width: 0;
    min-height: 250px;
    padding: 12px 10px;
    overflow: hidden;
    border: 1px solid #cbd8de;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 4px 12px rgba(24, 50, 71, 0.06);
}

.am-personal-mes-mini-titulo {
    display: block;
    margin: 0 0 10px;
    color: #183247;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    font-weight: 900;
}

.am-personal-mes-mini-titulo:hover {
    color: #317d90;
}

.am-personal-mes-mini-semana,
.am-personal-mes-mini-dias {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
}

.am-personal-mes-mini-semana {
    margin-bottom: 4px;
}

.am-personal-mes-mini-semana span {
    min-width: 0;
    color: #667985;
    text-align: center;
    font-size: 9px;
    font-weight: 900;
}

.am-personal-dia-mini {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 27px;
    place-items: center;
    padding: 0;
    border-radius: 5px;
    color: #173248;
    text-decoration: none;
    font-size: 10px;
    font-weight: 800;
}

.am-personal-dia-mini:hover {
    background: #dceef1;
    color: #215f70;
}

.am-personal-dia-mini.es-otro-mes {
    background: #f1f4f5;
    color: #a8b5bb;
}

/* En pantallas algo más pequeñas: 3 meses por fila */

@media (max-width: 1500px) {
    .am-personal-anio {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* En tablet: 2 meses por fila */

@media (max-width: 1050px) {
    .am-personal-anio {
        grid-template-columns: repeat(2, minmax(240px, 1fr));
        min-width: 620px;
    }
}

/* En móvil: un mes por fila */

@media (max-width: 620px) {
    .am-personal-anio {
        grid-template-columns: 1fr;
        min-width: 310px;
        padding: 10px;
    }
}

/*
|--------------------------------------------------------------------------
| COLORES DEL PERSONAL EN LA VISTA ANUAL
|--------------------------------------------------------------------------
*/

.am-personal-dia-mini {
    position: relative;
    grid-template-rows: 1fr auto;
    gap: 1px;
    padding: 2px;
}

.am-personal-dia-mini-numero {
    line-height: 1;
}

.am-personal-dia-mini-colores {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 100%;
    min-height: 4px;
}

.am-personal-dia-mini-color {
    display: block;
    width: 5px;
    height: 5px;
    border: 1px solid rgba(24, 50, 71, 0.2);
    border-radius: 50%;
}

/*
|--------------------------------------------------------------------------
| SELECCIÓN DE DÍAS
|--------------------------------------------------------------------------
*/

.am-personal-dia[data-am-seleccionable="1"] {
    cursor: pointer;
    user-select: none;
}

.am-personal-dia.esta-seleccionado {
    position: relative;
    background: #dceff2;
    box-shadow:
        inset 0 0 0 3px #317d90,
        inset 0 -5px 0 #e89b37;
}

.am-personal-dia.esta-seleccionado .am-personal-dia-numero {
    background: #317d90;
    color: #ffffff;
}

.am-personal-seleccionar-mes {
    min-height: 44px;
    padding: 8px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #4473cf;
    color: #ffffff;
    cursor: pointer;
    font-size: 20px;
    font-weight: 800;
}

.am-personal-seleccionar-mes:hover {
    background: #317d90;
}

.am-personal-seleccion {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 17px;
    border-bottom: 1px solid #cbd8de;
    background: #e8f4f6;
}

.am-personal-seleccion[hidden] {
    display: none !important;
}

.am-personal-seleccion-resumen {
    display: grid;
    gap: 3px;
}

.am-personal-seleccion-resumen strong {
    color: #183247;
}

.am-personal-seleccion-resumen span {
    color: #667985;
    font-size: 12px;
}

.am-personal-seleccion-acciones {
    display: flex;
    align-items: center;
    gap: 8px;
}

.am-personal-boton-limpiar {
    border: 1px solid #9fb4bd;
    background: #ffffff;
    color: #183247;
}

@media (max-width: 760px) {
    .am-personal-seleccion {
        align-items: stretch;
        flex-direction: column;
    }

    .am-personal-seleccion-acciones {
        flex-wrap: wrap;
    }
}

/*
|--------------------------------------------------------------------------
| PANELES LATERALES COMPACTOS
|--------------------------------------------------------------------------
*/

.am-personal-distribucion {
    grid-template-columns: 150px minmax(0, 1fr) 180px;
    gap: 10px;
}

/*
|--------------------------------------------------------------------------
| PANEL CALENDARIOS
|--------------------------------------------------------------------------
*/

.am-personal-calendarios {
    padding: 10px;
}

.am-personal-calendarios .am-personal-panel-cabecera {
    gap: 6px;
    margin-bottom: 10px;
}

.am-personal-calendarios .am-personal-panel-cabecera h2 {
    font-size: 14px;
}

.am-personal-calendario-mini a {
    align-items: flex-start;
    gap: 7px;
    padding: 9px 7px;
}

.am-personal-mini-icono {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    font-size: 17px;
}

.am-personal-mini-texto {
    min-width: 0;
    width: 100%;
}

.am-personal-mini-texto strong {
    display: block;
    overflow: visible;
    color: #183247;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.25;
}

.am-personal-mini-texto small {
    display: block;
    margin-top: 4px;
    overflow: visible;
    color: #667985;
    white-space: normal;
    font-size: 10px;
    line-height: 1.2;
}

/*
|--------------------------------------------------------------------------
| PANEL PERSONAL
|--------------------------------------------------------------------------
*/

.am-personal-equipo {
    padding: 10px;
}

.am-personal-equipo .am-personal-panel-cabecera {
    margin-bottom: 10px;
}

.am-personal-equipo .am-personal-panel-cabecera h2 {
    font-size: 15px;
}

.am-personal-persona {
    display: grid;
    grid-template-columns: 7px minmax(0, 1fr) 28px 24px;
    gap: 6px;
    padding: 8px 6px;
}

.am-personal-color {
    width: 7px;
    height: 42px;
}

.am-personal-persona-datos {
    min-width: 0;
}

.am-personal-persona-datos strong {
    display: block;
    overflow: visible;
    color: #183247;
    white-space: normal;
    overflow-wrap: anywhere;
    font-size: 12px;
    line-height: 1.2;
}

.am-personal-persona-datos small {
    display: block;
    margin-top: 4px;
    overflow: visible;
    color: #526873;
    white-space: normal;
    font-size: 10px;
    line-height: 1.2;
}

.am-personal-reloj {
    width: 28px;
    height: 28px;
    border: 1px solid #317d90;
    background: #e3f1f4;
    color: #183247;
    font-size: 17px;
    font-weight: 900;
}

.am-personal-eliminar-persona {
    width: 24px;
    height: 28px;
    color: #a53232;
    font-weight: 900;
}

.am-personal-equipo .am-personal-boton-ancho {
    min-height: 40px;
    padding: 8px 6px;
    font-size: 12px;
    line-height: 1.3;
}

/*
|--------------------------------------------------------------------------
| MANTENER EL CALENDARIO COMO ZONA PRINCIPAL
|--------------------------------------------------------------------------
*/

.am-personal-central {
    min-width: 0;
    width: 100%;
}

@media (max-width: 1120px) {
    .am-personal-distribucion {
        grid-template-columns: 145px minmax(0, 1fr);
    }

    .am-personal-equipo {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .am-personal-distribucion {
        display: block;
    }
}
/*
|--------------------------------------------------------------------------
| ADAPTACIÓN FINAL PARA TABLET Y MÓVIL
|--------------------------------------------------------------------------
*/

/* TABLET HORIZONTAL */

@media (max-width: 1120px) {
    .am-personal {
        width: 100%;
        padding: 16px 12px 36px;
    }

    .am-personal-distribucion {
        display: grid;
        grid-template-columns: 145px minmax(0, 1fr);
        gap: 12px;
    }

    .am-personal-calendarios {
        grid-column: 1;
    }

    .am-personal-central {
        grid-column: 2;
        min-width: 0;
    }

    .am-personal-equipo {
        grid-column: 1 / -1;
    }

    .am-personal-lista-personas {
        grid-template-columns: repeat(
            auto-fit,
            minmax(200px, 1fr)
        );
    }

    .am-personal-barra-calendario,
    .am-personal-navegacion,
    .am-personal-rejilla {
        min-width: 0;
    }

    .am-personal-dia {
        min-height: 115px;
        padding: 6px;
    }

    .am-personal-anio {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        min-width: 0;
    }
}


/* TABLET VERTICAL */

@media (max-width: 900px) {
    .am-personal {
        padding: 14px 10px 32px;
    }

    .am-personal-distribucion {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .am-personal-calendarios,
    .am-personal-central,
    .am-personal-equipo {
        width: 100%;
        margin: 0;
    }

    .am-personal-lista-calendarios {
        display: flex;
        gap: 9px;
        overflow-x: auto;
        padding-bottom: 6px;
        scroll-snap-type: x proximity;
    }

    .am-personal-calendario-mini {
        flex: 0 0 170px;
        scroll-snap-align: start;
    }

    .am-personal-central {
        overflow-x: auto;
    }

    .am-personal-barra-calendario {
        min-width: 700px;
    }

    .am-personal-navegacion {
        min-width: 700px;
    }

    .am-personal-rejilla {
        min-width: 700px;
    }

    .am-personal-anio {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
        gap: 12px;
        padding: 12px;
    }

    .am-personal-mes-mini {
        min-height: 245px;
    }

    .am-personal-lista-personas {
        grid-template-columns: repeat(
            2,
            minmax(0, 1fr)
        );
    }

    .am-personal-modal-contenido {
        width: min(560px, calc(100% - 24px));
    }
}


/* MÓVIL */

@media (max-width: 620px) {
    .am-personal {
        width: 100%;
        padding: 10px 7px 28px;
    }

    .am-personal-cabecera {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 15px;
    }

    .am-personal-identidad {
        align-items: center;
        gap: 12px;
    }

    .am-personal-logo {
        width: 62px;
        height: 62px;
    }

    .am-personal-cabecera h1 {
        font-size: 30px;
    }

    .am-personal-subtitulo {
        font-size: 13px;
    }

    .am-personal-cabecera form,
    .am-personal-cabecera .am-personal-boton {
        width: 100%;
    }

    .am-personal-lateral {
        padding: 11px;
    }

    .am-personal-barra-calendario {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        min-width: 620px;
    }

    .am-personal-form-renombrar input {
        width: 100%;
        max-width: none;
    }

    .am-personal-herramientas {
        justify-content: flex-start;
    }

    .am-personal-navegacion {
        grid-template-columns: auto 1fr auto;
        min-width: 620px;
        padding: 11px;
    }

    .am-personal-seleccionar-mes {
        font-size: 16px;
    }

    .am-personal-rejilla {
        min-width: 620px;
    }

    .am-personal-dia {
        min-height: 105px;
        padding: 5px;
    }

    .am-personal-dia-semana {
        min-height: 42px;
        cursor: pointer;
        touch-action: manipulation;
    }

    .am-personal-dia-numero {
        width: 35px;
        height: 35px;
    }

    .am-personal-agregar-dia {
        min-height: 34px;
    }

    .am-personal-seleccion {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .am-personal-seleccion-acciones {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .am-personal-seleccion-acciones button {
        width: 100%;
        min-height: 44px;
    }

    .am-personal-anio {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
        gap: 8px;
        padding: 8px;
    }

    .am-personal-mes-mini {
        min-height: 210px;
        padding: 10px 7px;
    }

    .am-personal-mes-mini-titulo {
        margin-bottom: 7px;
        font-size: 14px;
    }

    .am-personal-mes-mini-semana,
    .am-personal-mes-mini-dias {
        gap: 1px;
    }

    .am-personal-mes-mini-semana span {
        font-size: 8px;
    }

    .am-personal-dia-mini {
        min-height: 23px;
        font-size: 9px;
        touch-action: manipulation;
    }

    .am-personal-lista-personas {
        grid-template-columns: 1fr;
    }

    .am-personal-persona {
        min-height: 52px;
    }

    .am-personal-reloj,
    .am-personal-eliminar-persona {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .am-personal-modal {
        align-items: end;
        padding: 0;
    }

    .am-personal-modal-contenido,
    .am-personal-modal-pequeno {
        width: 100%;
        max-width: none;
        max-height: 92vh;
        padding: 22px 15px;
        border-radius: 18px 18px 0 0;
    }

    .am-personal-modal-cerrar {
        top: 12px;
        right: 12px;
        width: 42px !important;
        height: 42px !important;
    }

    .am-personal-form-fila {
        grid-template-columns: 1fr;
    }

    .am-personal-modal input,
    .am-personal-modal select,
    .am-personal-modal textarea,
    .am-personal-modal button {
        min-height: 46px;
    }
}


/* MÓVIL PEQUEÑO */

@media (max-width: 390px) {
    .am-personal-anio {
        grid-template-columns: 1fr;
    }

    .am-personal-mes-mini {
        min-height: 245px;
    }

    .am-personal-dia-mini {
        min-height: 29px;
        font-size: 10px;
    }
}
/*
|--------------------------------------------------------------------------
| CALENDARIO MENSUAL EN MÓVIL
|--------------------------------------------------------------------------
*/

/* Móvil en vertical */
@media screen and (max-width: 620px) and (orientation: portrait) {

    .am-personal {
        width: 100%;
        padding: 8px 4px 28px;
        overflow-x: hidden;
    }

    /*
     * En móvil colocamos primero el calendario.
     * Los paneles laterales pasan debajo.
     */
    .am-personal-distribucion {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .am-personal-central {
        order: 1;
        width: 100%;
        margin: 0;
        overflow: hidden;
    }

    .am-personal-calendarios {
        order: 2;
        width: 100%;
    }

    .am-personal-equipo {
        order: 3;
        width: 100%;
    }

    /*
     * Anulamos el ancho mínimo de escritorio.
     */
    .am-personal-barra-calendario,
    .am-personal-navegacion,
    .am-personal-rejilla {
        min-width: 0 !important;
        width: 100%;
    }

    /*
     * Cabecera interior compacta.
     */
    .am-personal-barra-calendario {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 5px;
        padding: 7px 5px;
    }

    .am-personal-form-renombrar {
        min-width: 0;
        gap: 3px;
    }

    .am-personal-form-renombrar input {
        width: 100%;
        min-width: 0;
        padding: 6px;
        font-size: 13px;
    }

    .am-personal-form-renombrar button {
        min-height: 31px;
        padding: 5px 7px;
        font-size: 10px;
    }

    .am-personal-herramientas {
        gap: 3px;
    }

    .am-personal-boton-secundario {
        min-height: 31px;
        padding: 5px 7px;
        font-size: 10px;
    }

    .am-personal-menu-boton {
        width: 31px;
        height: 31px;
        min-width: 31px;
        min-height: 31px;
    }

    /*
     * Navegación del mes en una sola fila.
     */
    .am-personal-navegacion {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: 4px;
        padding: 7px 4px;
    }

    .am-personal-navegacion-botones {
        gap: 2px;
    }

    .am-personal-navegacion-botones a,
    .am-personal-vistas a,
    .am-personal-vistas button {
        min-width: 29px;
        min-height: 29px;
        padding: 3px 5px;
        font-size: 10px;
    }

    .am-personal-navegacion-botones .am-personal-hoy {
        display: none;
    }

    .am-personal-seleccionar-mes {
        min-width: 0;
        padding: 5px 2px;
        overflow: hidden;
        border: 0;
        background: transparent;
        color: #183247;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 900;
    }

    .am-personal-vistas {
        gap: 2px;
    }

    /*
     * Rejilla completa de siete columnas.
     */
    .am-personal-rejilla {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 1px;
    }

    .am-personal-dia-semana {
        min-width: 0;
        padding: 6px 1px;
        overflow: hidden;
        font-size: 8px;
        letter-spacing: 0;
        white-space: nowrap;
    }

    .am-personal-dia {
        min-width: 0;
        min-height: 66px;
        padding: 3px 2px;
        overflow: hidden;
    }

    .am-personal-dia-numero {
        width: 23px;
        height: 23px;
        margin: 0 auto 3px;
        font-size: 10px;
    }

    /*
     * Los turnos se muestran de forma compacta.
     */
    .am-personal-contenido-dia {
        gap: 2px;
    }

    .am-personal-turno {
        min-height: 8px;
        padding: 2px;
        overflow: hidden;
        border-left-width: 4px;
        border-radius: 3px;
        font-size: 0;
    }

    .am-personal-turno div,
    .am-personal-turno small,
    .am-personal-turno p,
    .am-personal-turno form {
        display: none;
    }

    .am-personal-nota {
        min-height: 8px;
        padding: 2px;
        overflow: hidden;
        border-radius: 3px;
        font-size: 0;
    }

    .am-personal-nota span,
    .am-personal-nota p,
    .am-personal-nota form {
        display: none;
    }

    /*
     * Botón pequeño para abrir el día.
     */
    .am-personal-agregar-dia {
        min-height: 20px;
        margin-top: 3px;
        padding: 1px;
        overflow: hidden;
        font-size: 0;
    }

    .am-personal-agregar-dia::after {
        content: "+";
        font-size: 12px;
        font-weight: 900;
    }

    /*
     * Selección múltiple compacta.
     */
    .am-personal-seleccion {
        padding: 8px;
    }

    .am-personal-seleccion-resumen span {
        display: none;
    }

    .am-personal-seleccion-acciones {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .am-personal-seleccion-acciones button {
        min-height: 34px;
        padding: 5px;
        font-size: 10px;
    }
}


/*
|--------------------------------------------------------------------------
| MÓVIL GIRADO EN HORIZONTAL
|--------------------------------------------------------------------------
*/

@media screen
    and (max-height: 620px)
    and (orientation: landscape) {

    .am-personal {
        width: 100%;
        max-width: none;
        padding: 10px 8px 30px;
    }

    .am-personal-distribucion {
        display: grid;
        grid-template-columns: 115px minmax(0, 1fr) 135px;
        gap: 8px;
        width: 100%;
    }

    .am-personal-barra-calendario,
    .am-personal-navegacion,
    .am-personal-rejilla {
        min-width: 0 !important;
        width: 100%;
    }

    .am-personal-barra-calendario {
        padding: 8px 10px;
    }

    .am-personal-navegacion {
        grid-template-columns: 145px minmax(0, 1fr) 135px;
        padding: 8px;
    }

    .am-personal-rejilla {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .am-personal-dia-semana {
        padding: 7px 2px;
        font-size: 9px;
    }

    .am-personal-dia {
        min-width: 0;
        min-height: 92px;
        padding: 5px;
    }

    .am-personal-dia-numero {
        width: 27px;
        height: 27px;
        font-size: 11px;
    }

    .am-personal-turno {
        padding: 4px 17px 4px 5px;
        font-size: 9px;
    }

    .am-personal-turno p,
    .am-personal-turno small {
        display: none;
    }

    .am-personal-agregar-dia {
        min-height: 24px;
        padding: 2px;
        font-size: 9px;
    }

    .am-personal-lateral {
        padding: 8px;
    }

    .am-personal-panel-cabecera h2 {
        font-size: 13px;
    }

    .am-personal-mini-texto small,
    .am-personal-persona-datos small {
        display: none;
    }
}

/*
|--------------------------------------------------------------------------
| CORRECCIÓN FINAL PARA MÓVIL
|--------------------------------------------------------------------------
*/

/* Móvil vertical */
@media screen and (max-width: 620px) and (orientation: portrait) {

    /*
     * Botón cuadrado con solamente el signo +
     */
    .am-personal .am-personal-equipo > button.am-personal-boton-ancho {
        position: relative;
        display: grid;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        margin: 10px auto 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border-radius: 11px;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        text-indent: -9999px;
        white-space: nowrap;
    }

    .am-personal .am-personal-equipo > button.am-personal-boton-ancho::after {
        content: "+";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: #ffffff;
        font-size: 25px;
        font-weight: 900;
        line-height: 1;
        text-indent: 0;
    }
}


/*
|--------------------------------------------------------------------------
| MÓVIL HORIZONTAL SIN DEFORMACIÓN
|--------------------------------------------------------------------------
*/

@media screen
    and (max-height: 620px)
    and (orientation: landscape) {

    .am-personal {
        width: 100%;
        max-width: none;
        padding: 8px 6px 26px;
        overflow-x: hidden;
    }

    /*
     * No comprimir calendario y laterales en tres columnas.
     * El calendario se mantiene arriba y los laterales debajo.
     */
    .am-personal-distribucion {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .am-personal-central {
        order: 1;
        width: 100%;
        min-width: 0;
        overflow-x: auto;
    }

    .am-personal-calendarios {
        order: 2;
        width: 100%;
    }

    .am-personal-equipo {
        order: 3;
        width: 100%;
    }

    /*
     * El calendario mantiene una anchura útil.
     * Si la pantalla es estrecha, se desplaza horizontalmente
     * en lugar de deformarse.
     */
    .am-personal-barra-calendario,
    .am-personal-navegacion,
    .am-personal-rejilla {
        width: 100%;
        min-width: 760px !important;
    }

    .am-personal-dia {
        min-width: 0;
        min-height: 88px;
        padding: 4px;
    }

    .am-personal-dia-semana {
        padding: 6px 2px;
        font-size: 9px;
    }

    .am-personal-lista-calendarios {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        padding-bottom: 5px;
    }

    .am-personal-calendario-mini {
        flex: 0 0 165px;
    }

    .am-personal-lista-personas {
        display: grid;
        grid-template-columns: repeat(
            auto-fit,
            minmax(190px, 1fr)
        );
        gap: 8px;
    }

    /*
     * El logo conserva sus proporciones.
     */
    .am-personal-logo {
        width: 66px;
        height: 66px;
        flex: 0 0 66px;
        object-fit: contain;
    }
}
/*
|--------------------------------------------------------------------------
| BOTÓN + DE CADA DÍA EN MÓVIL
|--------------------------------------------------------------------------
*/

@media screen and (max-width: 620px) {
    .am-personal .am-personal-agregar-dia {
        position: relative;
        display: grid;
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
        margin: 6px auto 0;
        padding: 0;
        place-items: center;
        overflow: hidden;
        border: 1px dashed #559caf;
        border-radius: 9px;
        background: #f1f8f9;
        color: transparent !important;
        font-size: 0 !important;
        line-height: 0 !important;
        text-indent: -9999px;
        white-space: nowrap;
    }

    .am-personal .am-personal-agregar-dia::after {
        content: "+";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: #215f70;
        font-size: 23px;
        font-weight: 900;
        line-height: 1;
        text-indent: 0;
    }
}

/*
|--------------------------------------------------------------------------
| DOCUMENTO LIMPIO: IMPRESIÓN Y DESCARGA
|--------------------------------------------------------------------------
*/

.am-personal-documento-cabecera {
    display: none;
}

@media print {
    @page {
        size: landscape;
        margin: 10mm;
    }

    body * {
        visibility: hidden !important;
    }

    .am-personal-central,
    .am-personal-central * {
        visibility: visible !important;
    }

    .am-personal-central {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .am-personal-documento-cabecera {
        display: flex !important;
        align-items: center;
        gap: 16px;
        margin-bottom: 16px;
        padding-bottom: 12px;
        border-bottom: 3px solid #e89b37;
    }

    .am-personal-documento-cabecera img {
        width: 65px;
        height: 65px;
        object-fit: contain;
    }

    .am-personal-documento-cabecera span {
        color: #8c510e !important;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .am-personal-documento-cabecera h1 {
        margin: 3px 0;
        color: #183247 !important;
        font-size: 25px;
    }

    .am-personal-documento-cabecera p {
        margin: 0;
        color: #4f616b !important;
    }

    .am-personal-barra-calendario,
    .am-personal-seleccion,
    .am-personal-agregar-dia,
    .am-personal-turno form,
    .am-personal-nota form,
    .am-personal-navegacion-botones,
    .am-personal-vistas {
        display: none !important;
    }

    .am-personal-navegacion {
        display: block !important;
        padding: 7px 0 12px !important;
        border: 0 !important;
        background: #ffffff !important;
        text-align: center;
    }

    .am-personal-navegacion h2 {
        color: #183247 !important;
        text-align: center;
    }

    .am-personal-rejilla {
        min-width: 0 !important;
        width: 100% !important;
    }

    .am-personal-anio {
        grid-template-columns: repeat(4, 1fr) !important;
        width: 100% !important;
        padding: 0 !important;
    }
}
/*
|--------------------------------------------------------------------------
| MENÚ DEL CALENDARIO · BOTONES VISIBLES
|--------------------------------------------------------------------------
*/

.am-personal .am-personal-menu {
    padding: 7px;
    background: #ffffff;
}

.am-personal .am-personal-menu > button,
.am-personal .am-personal-menu > form > button {
    display: block !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #173248 !important;
    text-align: left !important;
    text-indent: 0 !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer !important;
}

.am-personal .am-personal-menu > button:hover,
.am-personal .am-personal-menu > button:focus {
    background: #e5f2f5 !important;
    color: #173248 !important;
}

.am-personal .am-personal-menu > form {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}

.am-personal .am-personal-menu > form > button.es-peligro {
    color: #b54141 !important;
}

.am-personal .am-personal-menu > form > button.es-peligro:hover,
.am-personal .am-personal-menu > form > button.es-peligro:focus {
    background: #fff0ee !important;
    color: #8d2f2f !important;
}