body {
    font-family: 'Roboto', sans-serif;
    margin:0; padding:0;
    background-color:#eef2f6;
}

header {
    display:flex; align-items:center; justify-content:center;
    background:#1b396a; color:white;
    height:50px;
    gap:10px;
    padding:5px 10px;
}

header h1 {
    font-size:1.4em;
    margin:0;
    font-weight:700;
}

header .logo {
    height:35px;
}

.container {
    max-width:1200px;
    margin:auto;
    padding:10px;
}

.fila-horizontal {
    display:flex;
    justify-content:space-between;
    margin-bottom:8px;
    gap:10px;
    align-items:flex-start;
}

.bloque {
    background:#ffffff;
    border-radius:8px;
    padding:10px;
    box-shadow:0 3px 6px rgba(0,0,0,0.1);
    flex:1;
    min-width:200px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}

.bloque h3 {margin-top:0; margin-bottom:6px; font-weight:500; color:#1b396a;}

input, select {
    margin:3px 0;
    padding:6px 8px;
    border-radius:6px;
    border:1px solid #ccc;
    width:80%;
    text-align:center;
}

button {
    margin:5px 0;
    padding:5px 10px;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-weight:500;
}

.btn-accion {background:#1b396a; color:white;}
.btn-accion:hover {background:#27478f;}
.btn-sortear {background:#2a9d8f; color:white; width:90%; margin-top:5px;}
.btn-sortear:hover {background:#21867a;}

.fila-principal {
    display:flex;
    gap:10px;
}

#panelAsignacion {
    flex:1;
    background:#f0f8ff;
    display: flex;
    flex-direction: column;
    align-items:center;
    min-height:400px;
}

#calendarioContainer {
    flex:2;
    min-height:400px;
    background:#fdfdfd;
    padding:5px;
    border-radius:10px;
    box-shadow:0 3px 6px rgba(0,0,0,0.1);
}

#bloqueListaResidentes {
    min-height:150px; /* Igualar altura a otros bloques superiores */
    display: flex;
    flex-direction: column;
    flex:1;
}

.scroll-panel {
    flex:1;
    overflow-y:auto;
    padding:5px;
    margin-top:5px;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
}

#listaResidentes {
    display:flex;
    flex-wrap: wrap;
    gap:5px;
    justify-content:center;
    max-height:200px;
    overflow-y:auto;
}

#opcionesAsignacion {
    display:flex;
    flex-direction: column;
    gap:3px;
    width:100%;
    overflow-y:auto;
    flex:1;
}

.scroll-horizontal {
    display:flex;
    overflow-x:auto;
    gap:5px;
    padding:3px 0;
}

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

.calendar th, .calendar td {
    border:1px solid #ccc;
    text-align:center;
    vertical-align:top;
    height:70px;
    padding:5px;
}

.calendar th {
    background:#1b396a;
    color:white;
}

.day-number {
    font-weight:bold;
    margin-bottom:3px;
}

.residente-card {
    padding:3px 6px;
    margin:2px;
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    font-weight:bold;
    background-color:#ddeeff;
    color:#1b396a;
    font-size:0.85em;
}

.residente-tag {
    padding:2px 6px;
    margin:2px 0;
    border-radius:6px;
    color:white;
    font-size:0.85em;
    display:inline-block;
    cursor:pointer; /* Cursor indicativo al pasar sobre un residente del calendario */
}

.residente-tag:hover {
    opacity:0.8;
}

.styled-checkbox {
    width:18px; height:18px;
    accent-color:#1b396a;
}

.fila-exportar {
    text-align:center;
    margin-top:10px;
}

.bloque-dev {
    margin:10px auto;
    max-width:600px;
    background:#fff4b1;
    padding:8px;
    border-radius:8px;
    box-shadow:0 2px 5px rgba(0,0,0,0.15);
    font-size:0.85em;
    text-align:center;
}

.hidden {display:none;}

@media(max-width:1024px){
    .fila-principal, .fila-horizontal {flex-direction:column;}
    #panelAsignacion {max-height:300px;}
}

@media(max-width:768px){
    .calendar th, .calendar td {height:60px; font-size:0.8em;}
}

@media print {
    body * {visibility:hidden;}
    #calendarioContainer, #calendarioContainer * {visibility:visible;}
    #calendarioContainer {position:absolute; top:0; left:0; width:100%;}
}