/* ==========================================================
public/assets/css/app.css v2.8 - SMA Citas Médicas Web
CAMBIOS v2.8:
- FIX: .card-header-block → display:block para que las filas
  del header del calendario se APILEN y el badge NO quede
  pegado al título "Calendario de Citas".
- FIX: badges con flex-shrink:0 y gap para separación correcta.
- Se mantiene todo lo anterior (blink 3s solo lista, botones
  mobile, upper-input, dias-badges, estrellas encuesta).
========================================================== */

/* ===== TOASTS ===== */
.toast-notification {
position: fixed; top: 90px; right: 20px; z-index: 9999;
min-width: 300px; max-width: 450px; padding: 16px 20px;
background: #fff; border-radius: 16px;
box-shadow: 0 10px 40px rgba(0,0,0,.2);
border-left: 5px solid #0056b3;
display: flex; align-items: center; gap: 14px;
transform: translateX(120%);
transition: transform .5s cubic-bezier(.34,1.56,.64,1);
font-size: .95rem; color: #333;
}

/* ===== HEADER (sin logo duplicado: nav centrado) ===== */
.header nav { margin: 0 auto; }

/* ===== DASHBOARD ===== */
.dashboard-container { padding-top: 20px; min-height: 100vh; background: #f0f4f8; }
.dashboard-container .card { border-radius: 16px !important; box-shadow: 0 2px 12px rgba(0,0,0,.06) !important; }
.dashboard-container .card-header { display:flex; align-items:center; justify-content:space-between; background:#fff !important; border-bottom:1px solid #f0f0f0 !important; min-height:60px; }
.dashboard-container .card-header h5 { font-size:1.05rem; color:var(--primary); }

/* v2.8: header en BLOQUE → las filas internas se apilan y separan bien */
.card-header-block { display:block !important; min-height:auto !important; }
.card-header-block > div { width:100%; }
.card-header-block .badge { flex-shrink:0; }

.btn-nueva-cita {
display:inline-flex; align-items:center; gap:6px;
background: var(--primary); color:#fff; border:none;
border-radius:50px; padding:.4rem 1.2rem; height:36px;
font-size:.85rem; font-weight:600; white-space:nowrap;
transition: all .2s ease;
}
.btn-nueva-cita:hover { background:#004494; transform:translateY(-2px); box-shadow:0 4px 15px rgba(0,86,179,.3); }

/* Botón "Nueva Cita" debajo del título Calendario en mobile */
.btn-nueva-cita-mobile {
padding: .35rem 1rem;
height: 32px;
font-size: .78rem;
}

/* Botón flotante mobile */
.btn-flotante-mobile {
position: fixed;
bottom: 30px;
right: 30px;
width: 60px;
height: 60px;
border-radius: 50%;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
box-shadow: 0 6px 20px rgba(0,86,179,.4);
z-index: 1000;
}
.btn-flotante-mobile:hover {
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(0,86,179,.5);
}

/* ===== LISTA DE CITAS ===== */
#citasLista { max-height: 560px; overflow-y: auto; }
#citasLista::-webkit-scrollbar { width:4px; }
#citasLista::-webkit-scrollbar-thumb { background:var(--primary); border-radius:10px; }

/* Estructura en 3 filas para alineación perfecta */
.cita-item {
background:#fff; border-radius:10px; padding:.9rem 1rem;
margin-bottom:.6rem; border-left:4px solid var(--primary);
box-shadow:0 1px 4px rgba(0,0,0,.05);
display:flex; flex-direction:column; gap:.5rem;
transition: all .2s ease;
}
.cita-item:hover { transform:translateX(4px); box-shadow:0 4px 15px rgba(0,0,0,.08); }

/* FILA 1: Nombre + Badges + Estado */
.cita-fila-1 {
display:flex; align-items:center; flex-wrap:wrap; gap:.5rem;
justify-content:space-between;
}
.paciente-nombre {
font-weight:600; font-size:.95rem; color:var(--dark);
flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.badges-container {
display:inline-flex; align-items:center; gap:.4rem;
flex-wrap:wrap;
}

/* FILA 2: Detalles */
.cita-fila-2 { display:flex; flex-direction:column; gap:2px; }
.cita-item .detalle { font-size:.78rem; color:#6c757d; }
.cita-item .detalle i { color:var(--primary); width:16px; }

/* FILA 3: Acciones */
.cita-fila-3 { display:flex; justify-content:flex-end; }
.cita-item .acciones .btn { padding:.2rem .5rem; font-size:.72rem; }

/* Estado */
.cita-item .estado { font-size:.7rem; font-weight:700; padding:.25rem .8rem; border-radius:50px; white-space:nowrap; }
.cita-item .estado.pendiente { background:#fff3cd; color:#856404; }
.cita-item .estado.asistio { background:#d4edda; color:#155724; }
.cita-item .estado.no-asistio { background:#f8d7da; color:#721c24; }

/* ==========================================================
EFECTO BLINK → SOLO LISTA "MIS CITAS" (derecha), CADA 3 SEGUNDOS
========================================================== */
@keyframes blinkLento {
0%, 100% { opacity: 1;   box-shadow: 0 0 0 0 rgba(220,53,69,.40);  }
50%      { opacity: .78; box-shadow: 0 0 0 9px rgba(220,53,69,0); }
}
@keyframes blinkSuave {
0%, 100% { opacity: 1; }
50%      { opacity: .72; }
}

.cita-item.cita-proxima {
border-left-color: var(--danger) !important;
animation: blinkLento 3s ease-in-out infinite;
}
.badge-proxima {
background: var(--danger); color:#fff;
padding:.25rem .6rem; border-radius:50px;
font-size:.68rem; font-weight:700;
animation: blinkSuave 3s ease-in-out infinite;
display:inline-flex; align-items:center; gap:4px;
}
.badge-confirmada {
background: #28a745; color:#fff;
padding:.25rem .6rem; border-radius:50px;
font-size:.68rem; font-weight:700;
display:inline-flex; align-items:center; gap:4px;
}
.blink-suave { animation: blinkSuave 3s ease-in-out infinite; }

/* ===== CALENDARIO ===== */
#calendar { background:#fff; border-radius:16px; padding:1rem; min-height:500px; }
.fc .fc-toolbar-title { font-size:1.1rem !important; font-weight:700 !important; color:var(--primary) !important; text-transform:capitalize; }
.fc .fc-button { background:var(--primary) !important; border-color:var(--primary) !important; font-size:.8rem !important; text-transform:capitalize !important; }
.fc .fc-button:hover { background:#004494 !important; }
.fc .fc-button-primary:disabled { background:#6c757d !important; border-color:#6c757d !important; }
.fc .fc-daygrid-day.fc-day-today { background:rgba(0,86,179,.06) !important; }
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number { color:var(--primary); font-weight:700; }
.fc .fc-event { border-radius:6px !important; padding:2px 6px !important; font-size:.72rem !important; font-weight:600 !important; border:none !important; cursor:pointer; }
.fc .fc-event-time { font-size:.65rem !important; }

/* ===== MODALES ===== */
.modal-content { border-radius:20px; border:none; box-shadow:0 30px 80px rgba(0,0,0,.2); }
.modal-header { border-bottom:2px solid #f0f0f0; }
.modal-header .modal-title { color:var(--primary); font-weight:700; }

/* ===== CAMPOS EN MAYÚSCULA Y BLOQUEADOS ===== */
.upper-input { text-transform: uppercase; }
.campo-bloqueado { background:#e9ecef !important; cursor:not-allowed; }

/* ===== BADGES DE DÍAS DEL MÉDICO (verde=atiende, gris=no) ===== */
.dias-badges { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }
.dias-badges .dia {
min-width:34px; text-align:center; padding:.25rem .4rem;
border-radius:8px; font-size:.72rem; font-weight:700;
}
.dias-badges .dia-ok  { background:#d4edda; color:#155724; border:1px solid #28a745; }
.dias-badges .dia-no { background:#e2e3e5; color:#6c757d; border:1px solid #adb5bd; opacity:.7; }

/* ===== ENCUESTA: estrellas ===== */
.encuesta-estrellas { display:flex; flex-direction:row-reverse; justify-content:center; gap:6px; padding:.4rem 0; }
.encuesta-estrellas input { display:none;  }
.encuesta-estrellas label { font-size:2.3rem; color:#d5d5d5; cursor:pointer; transition:color .25s ease, transform .25s ease; line-height:1; }
.encuesta-estrellas label:hover,
.encuesta-estrellas label:hover ~ label,
.encuesta-estrellas input:checked ~ label { color:#f5b301; transform:scale(1.08); }

/* ===== RESPONSIVE ===== */
@media (max-width: 992px)  {
.dashboard-container .card-body { padding:1rem !important; }
.fc .fc-toolbar { flex-wrap:wrap; gap:.5rem; }
}
@media (max-width: 576px) {
#calendar { min-height:350px; padding:.5rem; }
#citasLista { max-height:300px; }
.cita-fila-1 { flex-direction:column; align-items:flex-start; gap:.4rem; }
.badges-container { flex-wrap:wrap; }
.fc .fc-toolbar { flex-direction:column; align-items:center; }
.toast-notification { right:10px; left:10px; min-width:auto; }
.dashboard-container { padding-bottom: 100px; }
.dashboard-container .card-header { flex-wrap: wrap; }
}