/* Estilo macOS/iOS + paginación */
.ciae-an-container{
    background:#fff;
    padding:20px;
    border-radius:16px;
    box-shadow:0 8px 24px rgba(0,0,0,.08);
    font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color:#222;
    max-width:100%;
    overflow-x:auto;
}
.ciae-title{ margin-top:0; font-size:24px; font-weight:600; }
.ciae-search-wrapper{ position:relative; margin-bottom:16px; }
#ciae-user-search{
    width:100%; padding:10px 14px; border-radius:12px; border:1px solid #ddd; font-size:16px;
}
.ciae-dropdown{
    position:absolute; left:0; right:0; background:#fff; border:1px solid #ddd; border-radius:12px;
    margin-top:4px; max-height:260px; overflow:auto; z-index:99; display:none;
}
.ciae-dropdown .item{ padding:8px 12px; cursor:pointer; }
.ciae-dropdown .item:hover{ background:#f0f0f0; }
.ciae-dropdown .loading, .ciae-dropdown .nores, .ciae-dropdown .error{ padding:12px; }

.ciae-selected-student{
    margin:12px 0; padding:10px 14px; background:#f5f5f7; border-radius:10px; font-size:15px;
}
.hidden{ display:none !important; }

.ciae-form{
    background:#f9f9f9; padding:16px; border-radius:12px; margin-bottom:24px;
}
.ciae-form label{ display:block; margin-bottom:10px; font-size:14px; }
.ciae-form input[type="text"],
.ciae-form input[type="date"],
.ciae-form input[type="number"],
.ciae-form select,
.ciae-form textarea{
    width:100%; padding:8px 10px; border:1px solid #d0d0d0; border-radius:10px; font-size:14px; margin-top:4px;
}
.ciae-btn{
    border:0; border-radius:10px; padding:8px 14px; cursor:pointer; font-size:14px;
    box-shadow:0 2px 6px rgba(0,0,0,.12); transition:transform .1s ease;
}
.ciae-btn.primary{ background:#007aff; color:#fff; }
.ciae-btn.danger{ background:#ff3b30; color:#fff; }
.ciae-btn.small{ padding:4px 8px; font-size:12px; }
.ciae-btn:hover{ transform:translateY(-1px); }

.ciae-table{ width:100%; border-collapse:collapse; margin-bottom:16px; font-size:14px; }
.ciae-table th,.ciae-table td{ border-bottom:1px solid #eee; padding:8px 6px; text-align:left; }
.ciae-table tbody tr:hover{ background:#fafafa; }
.ciae-table td.editable{ background:#fff; cursor:text; }

.ciae-toast{
    position:fixed; bottom:24px; left:50%;
    transform:translateX(-50%) translateY(100px);
    background:#333; color:#fff; padding:12px 18px; border-radius:12px; opacity:0;
    transition:all .3s ease; z-index:9999;
}
.ciae-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.ciae-alert.error{
    background:#ffdad7; color:#b3261e; padding:12px 16px; border-radius:12px; margin-bottom:12px; font-size:14px;
}
.empty{ color:#666; font-size:14px; }

.ciae-pager{
    display:flex; align-items:center; gap:8px; margin:8px 0 24px;
    font-size:13px; color:#444;
}
.ciae-pager span{ padding:0 6px; }

@media (max-width:768px){
    .ciae-form{ padding:12px; }
    .ciae-title{ font-size:20px; }
    .ciae-table th, .ciae-table td{ font-size:13px; padding:6px 4px; }
}


/* addon 3.4.5 */
.ciae-table td.editable{ cursor:pointer; }
td.editable input, td.editable textarea, td.editable select{ width:100% !important; box-sizing:border-box; }

.ciae-bulkbar{margin:6px 0 10px;text-align:right;}
.ciae-bulkbar.hidden{display:none;}

/* sticky bulkbar (optional) */
.ciae-bulkbar{position:sticky; top:0; background:#fff; z-index:3; padding:6px 0;}

/* ====== macOS polish pack 3.5.0 ====== */
.ciae-an-container,
#ciae-historial-alumno.ciae-an-container{
    background:#fff;
    border-radius:20px;
    box-shadow:0 12px 28px rgba(0,0,0,.08);
    padding:24px 26px;
}
.ciae-an-container h2,
#ciae-historial-alumno h2{
    font-size:28px;
    font-weight:600;
    margin:0 0 18px;
}
.ciae-an-container h3,
#ciae-historial-alumno h3{
    font-size:20px;
    font-weight:500;
    margin:28px 0 12px;
}
.ciae-table{
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    border-radius:14px;
}
.ciae-table thead th{
    background:#f5f5f7;
    position:sticky;
    top:0;
    z-index:2;
    font-weight:500;
}
.ciae-table tbody tr:nth-child(even){ background:#fafafa; }
.ciae-table th, .ciae-table td{
    border-bottom:1px solid #ededed;
    padding:10px 8px;
}
.ciae-table td.editable:hover{ background:#fffbe7; }
.ciae-table td:last-child, .ciae-table th:last-child{ text-align:center; width:34px; }
.ciae-bulkbar{
    position:sticky;
    top:0;
    background:#fff;
    padding:6px 0 8px;
    z-index:5;
    text-align:right;
    box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.ciae-toast{
    border-radius:14px;
    font-size:14px;
    padding:12px 18px;
}
td.editable input, td.editable textarea, td.editable select{
    border-radius:10px;
    border:1px solid #d0d0d0;
    padding:6px 8px;
    font-size:14px;
}
@media(max-width:768px){
    .ciae-an-container{ padding:18px 16px; }
    .ciae-table th, .ciae-table td{ padding:8px 6px; font-size:13px; }
}

/* Autocomplete list prettier */
.ciae-user-suggest, .ciae-user-search-results{
  max-height:220px; overflow:auto;
  border:1px solid #e0e0e0; background:#fff;
  border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.08);
  margin-top:6px;
}
.ciae-user-suggest li, .ciae-user-search-results li{ padding:8px 12px; cursor:pointer; }
.ciae-user-suggest li:hover, .ciae-user-search-results li:hover{ background:#f5f5f7; }
.ciae-btn.loading{opacity:.6;pointer-events:none;position:relative;}
.ciae-btn.loading:after{content:'...';position:absolute;right:10px;}


/* ====== UI SEARCH PACK (responsive + macOS look) ====== */

/* wrapper (optional, por si existe) */
.ciae-user-search-wrap{
    position: relative;
    max-width: 520px;
    margin: 0 0 20px;
}

/* Input principal */
.ciae-user-search-wrap input[type="text"],
#ciae-user-search{
    width: 100%;
    border: 1px solid #d0d0d0;
    border-radius: 14px;
    padding: 10px 42px 10px 14px;
    font-size: 15px;
    outline: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.05) inset;
    background: #fafafa;
    transition: box-shadow .15s, border .15s, background .15s;
}
#ciae-user-search:focus{
    background:#fff;
    border-color:#9ec6ff;
    box-shadow: 0 0 0 3px rgba(0,123,255,.12);
}

/* Icono de lupa pseudo */
.ciae-user-search-wrap::after{
    content: "🔍";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    pointer-events: none;
    opacity:.6;
}

/* Lista sugerencias/resultados */
.ciae-user-suggest,
.ciae-user-search-results{
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid #e0e0e0;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
    padding: 4px 0;
}

.ciae-user-suggest li,
.ciae-user-search-results li{
    padding: 8px 14px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ciae-user-suggest li:hover,
.ciae-user-search-results li:hover{
    background: #f5f5f7;
}

/* Scrollbar fino */
.ciae-user-suggest::-webkit-scrollbar,
.ciae-user-search-results::-webkit-scrollbar{
    width: 6px;
}
.ciae-user-suggest::-webkit-scrollbar-thumb,
.ciae-user-search-results::-webkit-scrollbar-thumb{
    background:#c5c5c5;
    border-radius:4px;
}

/* Botón bulk loading */
.ciae-btn.loading{opacity:.6; pointer-events:none; position:relative;}
.ciae-btn.loading:after{
    content:'...';
    position:absolute;
    right:10px;
}

/* Tablas responsive */
@media(max-width:768px){
    .ciae-table{ display:block; overflow-x:auto; }
    .ciae-user-search-wrap{ max-width:100%; }
    .ciae-user-suggest, .ciae-user-search-results{ max-height: 180px; font-size:14px; }
}

.ciae-quick-refresh{margin-left:8px;border-radius:50%;width:30px;height:30px;line-height:26px;padding:0;font-size:16px;}
.ciae-btn.loading{opacity:.6;pointer-events:none;position:relative;}
.ciae-btn.loading:after{content:'...';position:absolute;right:10px;}


/* ====================== */
/* 🌐 Estilos Responsivos */
/* ====================== */
@media (max-width: 768px) {
    .ciae-an-container {
        padding: 10px;
        border-radius: 12px;
        font-size: 14px;
    }

    .ciae-title {
        font-size: 20px;
        text-align: center;
    }

    #ciae-user-search {
        font-size: 14px;
        padding: 8px 12px;
    }

    .ciae-table-wrapper,
    .ciae-table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    .ciae-table th,
    .ciae-table td {
        font-size: 14px;
        padding: 8px;
    }

    .ciae-form-wrapper input,
    .ciae-form-wrapper select,
    .ciae-form-wrapper button {
        font-size: 14px !important;
        width: 100% !important;
        margin-bottom: 10px;
    }

    .ciae-panel {
        flex-direction: column;
    }

    .ciae-btn {
        width: 100%;
        margin-top: 10px;
    }
}