/*
 * Stylesheet for Recordar for Bluesky Admin Page (v2.2.4 Mobile Optimized)
 */

/* =================================================================
 * 0. GLOBAL FIXES & LAYOUT
 * ================================================================= */

.rec-bsky-admin-wrapper * {
    box-sizing: border-box;
}

/* Drag and drop cursor */
#rec-bsky-schedule-rows .rec-bsky-schedule-row,
#rec-bsky-draft-rows .rec-bsky-schedule-row {
    cursor: move;
}

/* Table adjustments (Inputs) */
#rec-bsky-schedule-table select,
#rec-bsky-draft-table select,
#rec-bsky-schedule-table input[type="text"],
#rec-bsky-schedule-table input[type="datetime-local"] {
    width: 100%;
    max-width: 100%;
    height: 40px; /* MEJORA MÓVIL: Altura fija para facilitar el toque */
}

/* =================================================================
 * NEW: TABLE READABILITY & ALIGNMENT FIXES
 * ================================================================= */

#rec-bsky-schedule-table td,
#rec-bsky-schedule-table th,
#rec-bsky-draft-table td,
#rec-bsky-draft-table th {
    vertical-align: middle !important;
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    line-height: 1.4;
}

/* Fechas en una línea */
#rec-bsky-schedule-table td.column-date,
#rec-bsky-schedule-table td:first-child {
    white-space: nowrap;
}

/* Columna de acciones (Botones) */
#rec-bsky-schedule-table td:last-child,
#rec-bsky-draft-table td:last-child {
    white-space: normal;
    min-width: 120px; 
}

#rec-bsky-schedule-table td:last-child > div,
#rec-bsky-draft-table td:last-child > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Un poco más de espacio entre botones */
}

/* =================================================================
 * 3. DIAGNOSTIC BOXES (Sin cambios, funcionan bien)
 * ================================================================= */
.rec-bsky-notice-status, .rec-bsky-notice-success, 
.rec-bsky-notice-error, .rec-bsky-notice-blue {
    border: 1px solid #c3c4c7;
    padding: 10px 15px;
    margin-bottom: 15px;
}
.rec-bsky-notice-status { background: #fffbe6; border-left: 4px solid #ffba00; }
.rec-bsky-notice-success { background: #dff0d8; border-left: 4px solid #468847; }
.rec-bsky-notice-error { background: #f2dede; border-left: 4px solid #b94a48; }
.rec-bsky-notice-blue { background: #e9f9f9; border-left: 4px solid #007cba; margin-top: 10px; }
.rec-bsky-notice-blue p { margin: 0 0 5px 0; }
.rec-bsky-notice-blue ul { margin: 5px 0 5px 20px; }
.rec-bsky-notice-blue li { word-break: break-all; margin-bottom: 2px; }

/* =================================================================
 * 5. MODULAR DESIGN (GRID & CARDS)
 * ================================================================= */

.rec-bsky-admin-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    align-items: start;
    margin-top: 20px;
    width: 100%;
}

.rec-bsky-card {
    background: #fff;
    border: 1px solid #c3c4c7;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    border-radius: 4px;
    
    /* CRÍTICO: Mantiene el scroll interno */
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; /* MEJORA: Scroll suave en iOS */
}

.rec-bsky-card h2, .rec-bsky-card h3 {
    margin-top: 0;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f1;
    margin-bottom: 15px;
    font-size: 1.2em;
}

.rec-bsky-card .form-table th {
    width: 200px;
    vertical-align: middle;
}

#rec-bsky-schedule-table {
    border: none;
    width: 100%;
}

/* Responsive Intermedio */
@media screen and (max-width: 1100px) {
    .rec-bsky-admin-wrapper {
        grid-template-columns: 100%; 
    }
    .rec-bsky-card .form-table th {
        width: auto;
    }
}

/* =================================================================
 * AJUSTES MÓVILES (CRÍTICOS)
 * ================================================================= */
@media screen and (max-width: 782px) {
    
    /* 1. Layout general */
    .rec-bsky-admin-wrapper {
        display: block; /* Pila simple */
        padding: 0;
    }
    
    .rec-bsky-card {
        padding: 10px; /* Reducimos padding de la tarjeta para ganar espacio */
    }

    /* 2. FORZAR ANCHO DE TABLA:
       Esto es lo que garantiza la "legibilidad".
       Si la tabla se encoge al ancho del móvil (ej. 350px), los inputs no caben.
       Al forzar un min-width, obligamos a que aparezca el scroll horizontal
       pero el contenido dentro se ve perfecto. */
    #rec-bsky-schedule-table, 
    #rec-bsky-draft-table {
        min-width: 600px; /* Ajusta este valor si ves que necesitas más espacio */
    }

    /* 3. Inputs legibles */
    #rec-bsky-schedule-table input,
    #rec-bsky-schedule-table select {
        font-size: 16px; /* Evita que el iPhone haga zoom al pulsar */
    }

    /* 4. Botones apilados y grandes */
    #rec-bsky-schedule-table td:last-child > div,
    #rec-bsky-draft-table td:last-child > div {
        flex-direction: column;
    }

    #rec-bsky-schedule-table td:last-child button,
    #rec-bsky-schedule-table td:last-child a.button,
    #rec-bsky-draft-table td:last-child button {
        width: 100%;       /* Botón ancho completo */
        text-align: center;
        margin-bottom: 5px;
        padding: 10px;     /* Zona de toque más grande */
        height: auto;      /* Dejar que crezca si el texto es largo */
    }
    
    /* 5. Etiquetas */
    .rec-bsky-card label {
        white-space: normal; /* Permitimos que las etiquetas largas bajen de línea */
        font-size: 13px;
    }
}