/* Sistema de Reservas AIP — Estilos del Calendario
 * I.E. Sagrado Corazón de Jesús — Anta, Cusco
 * Generado desde sistema-reservas-aulas.php
 */

    #sra-wrapper * { box-sizing: border-box; font-family: 'Roboto', 'Google Sans', Arial, sans-serif; }

    #sra-wrapper {
        max-width: 900px;
        margin: 0 auto;
        background: #fff;
        border: 1px solid #dadce0;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(60,64,67,.15), 0 4px 8px rgba(60,64,67,.1);
    }

    /* --- Toolbar de FullCalendar → estilo Google --- */
    #sra-wrapper .fc .fc-toolbar {
        padding: 12px 16px;
        background: #fff;
        border-bottom: 1px solid #e0e0e0;
        flex-wrap: wrap;
        gap: 8px;
    }
    #sra-wrapper .fc .fc-toolbar-title {
        font-size: 22px;
        font-weight: 400;
        color: #3c4043;
        letter-spacing: -.5px;
    }
    #sra-wrapper .fc .fc-button {
        background: #fff;
        border: 1px solid #dadce0;
        color: #3c4043;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        padding: 6px 12px;
        box-shadow: none;
        transition: background .1s;
    }
    #sra-wrapper .fc .fc-button:hover { background: #f1f3f4; }
    #sra-wrapper .fc .fc-button-active,
    #sra-wrapper .fc .fc-button:focus { background: #fdf0f2 !important; border-color: #f5d0d4 !important; color: #8b1a2a !important; outline: none; box-shadow: none !important; }
    #sra-wrapper .fc .fc-today-button {
        border-radius: 20px;
        padding: 6px 16px;
        font-weight: 500;
    }
    #sra-wrapper .fc .fc-button-group { gap: 0; }
    #sra-wrapper .fc .fc-button-group .fc-button { border-radius: 0; border-right-width: 0; }
    #sra-wrapper .fc .fc-button-group .fc-button:first-child { border-radius: 4px 0 0 4px; }
    #sra-wrapper .fc .fc-button-group .fc-button:last-child  { border-radius: 0 4px 4px 0; border-right-width: 1px; }

    /* --- Cabecera días --- */
    #sra-wrapper .fc .fc-col-header-cell {
        background: #fff;
        border-color: #e0e0e0;
        padding: 8px 0;
    }
    #sra-wrapper .fc .fc-col-header-cell-cushion {
        font-size: 11px;
        font-weight: 500;
        color: #70757a;
        text-transform: uppercase;
        letter-spacing: .8px;
        text-decoration: none !important;
    }

    /* --- Celdas del mes --- */
    #sra-wrapper .fc .fc-daygrid-day { border-color: #e0e0e0; }
    #sra-wrapper .fc .fc-daygrid-day-number {
        font-size: 13px;
        color: #3c4043;
        text-decoration: none;
        padding: 6px 8px;
        font-weight: 400;
    }

    /* --- HOY: círculo azul igual a Google Calendar --- */
    #sra-wrapper .fc .fc-day-today { background: #fff !important; }
    #sra-wrapper .fc .fc-day-today .fc-daygrid-day-number {
        background: #8b1a2a;
        color: #fff !important;
        border-radius: 50%;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        margin: 4px;
        font-weight: 500;
    }

    /* --- Eventos --- */
    #sra-wrapper .fc .fc-event {
        border: none;
        border-radius: 4px;
        font-size: 12px;
        padding: 1px 3px;
        cursor: pointer;
        box-shadow: 0 1px 3px rgba(0,0,0,.2);
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
    #sra-wrapper .fc .fc-event:hover { filter: brightness(0.93); }

    /* Quitar borde del tema que sobreescribe el color del aula */
    #sra-wrapper .fc .fc-daygrid-event,
    #sra-wrapper .fc .fc-timegrid-event {
        border: none !important;
        box-shadow: none !important;
        min-height: 52px !important;  /* altura mínima para mostrar 2 líneas */
    }
    /* Aumentar altura de cada slot para que los bloques de 45 min sean más legibles */
    #sra-wrapper .fc .fc-timegrid-slot { height: 28px !important; }
    /* El tema convierte fc-daygrid-event en <a> azul — neutralizarlo */
    #sra-wrapper .fc a.fc-event.fc-daygrid-event,
    #sra-wrapper .fc a.fc-event.fc-daygrid-event:link,
    #sra-wrapper .fc a.fc-event.fc-daygrid-event:visited,
    #sra-wrapper .fc a.fc-event.fc-daygrid-event:hover,
    #sra-wrapper .fc a.fc-event.fc-timegrid-event,
    #sra-wrapper .fc a.fc-event.fc-timegrid-event:link,
    #sra-wrapper .fc a.fc-event.fc-timegrid-event:visited,
    #sra-wrapper .fc a.fc-event.fc-timegrid-event:hover,
    #sra-wrapper .fc .fc-timegrid-event .fc-event-main a,
    #sra-wrapper .fc .fc-timegrid-event .fc-event-title-container a {
        color: #fff !important;
        text-decoration: none !important;
    }
    /* Texto blanco en eventos con fondo de color */
    #sra-wrapper .fc .fc-daygrid-event *,
    #sra-wrapper .fc .fc-daygrid-event a,
    #sra-wrapper .fc .fc-timegrid-event *,
    #sra-wrapper .fc .fc-timegrid-event a {
        color: #fff !important;
        text-decoration: none !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }
    /* Resetear estilos de enlace del tema dentro de eventos */
    #sra-wrapper .fc .fc-event a,
    #sra-wrapper .fc .fc-event a:link,
    #sra-wrapper .fc .fc-event a:hover,
    #sra-wrapper .fc .fc-event a:visited {
        color: #fff !important;
        text-decoration: none !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    /* Vista Agenda: texto oscuro sobre fondo blanco */
    #sra-wrapper .fc .fc-list-event a {
        color: #3c4043 !important;
        text-decoration: none !important;
    }
    #sra-wrapper .fc .fc-list-event td { background: transparent !important; }
    /* Ocultar celda del punto de color — usamos nuestra propia barra */
    #sra-wrapper .fc td.fc-list-event-graphic { display: none !important; width: 0 !important; padding: 0 !important; }
    /* Eliminar todo padding de la celda de título */
    #sra-wrapper .fc td.fc-list-event-title { padding-left: 0 !important; padding-right: 8px !important; }
    #sra-wrapper .fc .fc-list-event-title a { padding: 0 !important; margin: 0 !important; }
    /* Extender título para ocupar toda la fila */
    #sra-wrapper .fc td.fc-list-event-title { width: 100% !important; }

    /* --- Vista Semana: slots --- */
    #sra-wrapper .fc .fc-timegrid-slot { border-color: #e0e0e0; height: 40px; }
    #sra-wrapper .fc .fc-timegrid-slot-label { font-size: 11px; color: #70757a; }
    #sra-wrapper .fc .fc-timegrid-axis { border-color: #e0e0e0; }

    /* --- Vista Agenda/Lista --- */
    #sra-wrapper .fc .fc-list-table { border-color: #e0e0e0; }
    #sra-wrapper .fc .fc-list-day-cushion { background: #f8f9fa; font-size: 13px; font-weight: 600; color: #3c4043; padding: 8px 14px; }
    #sra-wrapper .fc .fc-list-day-text { font-weight: 600; color: #1a73e8; text-transform: capitalize; }
    #sra-wrapper .fc .fc-list-day-side-text { display: none; }

    /* Script para combinar celdas B+C en vista Agenda */
    #sra-wrapper .fc .fc-list-event:hover td { background: #f8f9fa; }
    #sra-wrapper .fc .fc-list-event-title { font-size: 13px; }

    /* --- Sin eventos en lista --- */
    #sra-wrapper .fc .fc-list-empty { background: #fff; color: #70757a; font-size: 14px; }

    /* --- MODAL Estilo Google --- */
    #sra-modal-detalle {
        border: none;
        border-radius: 8px;
        padding: 0;
        box-shadow: 0 8px 24px rgba(60,64,67,.3);
        max-width: 380px;
        width: 95%;
        font-family: 'Roboto', sans-serif;
        background: #fff;
        overflow: hidden;
    }
    #sra-modal-detalle::backdrop { background: rgba(0,0,0,.35); }
    .sra-modal-header {
        padding: 16px 20px 12px;
        border-bottom: 1px solid #e0e0e0;
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .sra-modal-color-dot {
        width: 14px; height: 14px;
        border-radius: 50%;
        flex-shrink: 0;
        background: #8b1a2a;
    }
    .sra-modal-titulo { font-size: 18px; font-weight: 500; color: #3c4043; margin: 0; }
    .sra-modal-body { padding: 16px 20px; }
    .sra-modal-row {
        display: flex;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 12px;
        font-size: 14px;
        color: #3c4043;
    }
    .sra-modal-icon { color: #5f6368; font-size: 18px; flex-shrink: 0; width: 20px; text-align: center; margin-top: 1px; }
    .sra-modal-label { font-size: 12px; color: #70757a; }
    .sra-modal-footer {
        padding: 10px 20px 14px;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        border-top: 1px solid #e0e0e0;
    }
    .sra-btn {
        padding: 8px 16px;
        border: none;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: background .15s;
    }
    .sra-btn-cerrar  { background: #f1f3f4; color: #3c4043; }
    .sra-btn-cerrar:hover  { background: #e8eaed; }
    .sra-btn-editar  { background: #fdf0f2; color: #8b1a2a; }
    .sra-btn-editar:hover  { background: #f5d0d4; }
    .sra-btn-eliminar { background: #fce8e6; color: #d93025; }
    .sra-btn-eliminar:hover { background: #f5c6c2; }
    .sra-btn-confirmar { background: #8b1a2a; color: #fff; }
    .sra-btn-confirmar:hover { background: #6b0f1a; }

    /* --- Sidebar Form --- */
    #sra-sidebar {
        background: #f8f9fa;
        border: 1px solid #dadce0;
        border-radius: 8px;
        padding: 20px;
        flex: 1;
        min-width: 280px;
    }
    #sra-sidebar h3 {
        font-size: 16px;
        font-weight: 500;
        color: #3c4043;
        margin: 0 0 4px;
    }
    .sra-bienvenida { font-size: 13px; color: #5f6368; margin-bottom: 16px; }
    .sra-campo label { display: block; font-size: 12px; font-weight: 500; color: #5f6368; margin-bottom: 4px; letter-spacing: .3px; text-transform: uppercase; }
    .sra-campo { margin-bottom: 14px; }
    .sra-campo input,
    .sra-campo select {
        width: 100%;
        border: 1px solid #dadce0;
        border-radius: 4px;
        padding: 8px 10px;
        font-size: 14px;
        color: #3c4043;
        background: #fff;
        transition: border-color .15s;
        outline: none;
    }
    .sra-campo input:focus,
    .sra-campo select:focus { border-color: #6b0f1a; box-shadow: 0 0 0 2px rgba(107,15,26,.12); }
    #sra-submit-btn {
        width: 100%;
        padding: 10px;
        background: #8b1a2a;
        color: #fff;
        border: none;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        cursor: pointer;
        transition: background .15s;
    }
    #sra-submit-btn:hover { background: #6b0f1a; }
    #sra-submit-btn:disabled { background: #a8c7fa; cursor: not-allowed; }
    #sra-cancel-edit {
        display: none;
        width: 100%;
        margin-top: 8px;
        padding: 8px;
        background: #f1f3f4;
        color: #3c4043;
        border: none;
        border-radius: 4px;
        font-size: 13px;
        cursor: pointer;
    }
    #sra-cancel-edit:hover { background: #e8eaed; }
    #sra-mensaje { margin-top: 10px; font-size: 13px; font-weight: 500; text-align: center; }

    /* --- Layout general --- */
    #sra-layout { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 20px; }
    #sra-calendario-contenedor { flex: 2; min-width: 300px; }

    /* --- Login box --- */
    #sra-login-box {
        max-width: 380px;
        margin: 32px auto;
        padding: 28px 28px 20px;
        background: #fff;
        border: 1px solid #dadce0;
        border-radius: 8px;
        box-shadow: 0 2px 8px rgba(60,64,67,.12);
        text-align: center;
    }
    #sra-login-box h3 { font-size: 18px; font-weight: 400; color: #202124; margin-bottom: 6px; }
    #sra-login-box p  { font-size: 14px; color: #5f6368; margin-bottom: 20px; }

    /* --- Leyenda de aulas --- */
    #sra-leyenda {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 14px;
        border-bottom: 1px solid #e0e0e0;
        background: #fafafa;
    }
    .sra-leyenda-item { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #5f6368; }
    .sra-leyenda-dot  { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }

    /* ── RESPONSIVE MÓVIL — Calendario ── */
    @media (max-width: 640px) {
        #sra-wrapper { border-radius: 6px; }
        #sra-wrapper .fc .fc-toolbar { padding: 8px 10px; gap: 6px; }
        #sra-wrapper .fc .fc-toolbar-title { font-size: 15px; }
        #sra-wrapper .fc .fc-button { padding: 5px 8px; font-size: 11px; }
        #sra-wrapper .fc .fc-today-button { padding: 5px 10px; }
        #sra-wrapper .fc .fc-col-header-cell-cushion { font-size: 9px; letter-spacing: 0; }
        #sra-wrapper .fc .fc-daygrid-day-number { font-size: 11px; padding: 2px 3px; }
        #sra-wrapper .fc .fc-day-today .fc-daygrid-day-number { width: 20px; height: 20px; font-size: 10px; margin: 2px; }
        /* Eventos Rn en móvil: solo daygrid y timegrid */
        #sra-wrapper .fc .fc-daygrid-event { max-height: 22px !important; overflow: hidden !important; }
        #sra-wrapper .fc .fc-event { font-size: 11px !important; padding: 2px 4px !important; border-radius: 3px !important; }
        #sra-wrapper .fc .fc-daygrid-event *,
        #sra-wrapper .fc .fc-timegrid-event * { color: #fff !important; white-space: nowrap !important; }
        #sra-wrapper .fc .fc-daygrid-day { min-height: 52px; }
        /* Modal a pantalla completa */
        #sra-modal-detalle { width: 95% !important; max-width: 95vw !important; }
        .sra-modal-body { padding: 12px 14px; }
        .sra-modal-footer { padding: 8px 14px 12px; gap: 6px; }
        .sra-btn { padding: 7px 12px; font-size: 13px; }
        /* Sidebar formulario */
        #sra-sidebar { padding: 16px; margin-top: 16px; }
        .sra-campo input, .sra-campo select { padding: 10px; font-size: 14px; }
        /* Leyenda */
        #sra-leyenda { padding: 8px 10px; gap: 8px; }
        .sra-leyenda-item { font-size: 11px; }
        #sra-calendario-contenedor { padding: 10px; }
        #sra-footer { flex-direction: column; align-items: flex-start; padding: 10px 12px; gap: 4px; }
        #sra-footer-info { font-size: 10px; }
    }

    /* --- Footer estilo Google Calendar embebido --- */
    #sra-footer {
        padding: 10px 16px;
        border-top: 1px solid #e0e0e0;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 8px;
    }
    #sra-footer-info { font-size: 11px; color: #70757a; line-height: 1.5; }
    #sra-footer-info a { color: #8b1a2a; text-decoration: none; }
    #sra-footer-logo { font-size: 12px; color: #70757a; display: flex; align-items: center; gap: 4px; }
    #sra-footer-logo span { color: #8b1a2a; font-weight: 500; }