/* ===========================
   RESET BÁSICO
=========================== */
*{
    box-sizing:border-box;
    margin:0;
    padding:0;
}

.ex-body{
    font-family:'Roboto', Arial, sans-serif;
    background:#050505;
    color:#f5f5f5;
}

/* ===========================
   LOGIN
=========================== */
.ex-login-bg{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#050505;
}

.ex-login-card{
    background:linear-gradient(145deg,#111,#181818);
    border-radius:14px;
    padding:24px 22px 22px;
    width:100%;
    max-width:380px;
    box-shadow:0 18px 40px rgba(0,0,0,.75);
    text-align:center;
    border:1px solid rgba(255,255,255,.06);
}

.ex-login-logo{
    margin-bottom:10px;
}
.ex-login-logo img{
    width:90px;
    height:auto;
    display:block;
    margin:0 auto;
}

.ex-login-card h1{
    font-size:1.35rem;
    margin-bottom:4px;
}
.ex-subtitle{
    font-size:.86rem;
    color:#cfcfcf;
    margin-bottom:12px;
}

.ex-form{
    margin-top:8px;
    text-align:left;
}
.ex-form-group{
    margin-bottom:10px;
}
.ex-form-group label{
    display:block;
    font-size:.9rem;
    margin-bottom:3px;
}
.ex-form-group input{
    width:100%;
    padding:7px 9px;
    border-radius:6px;
    border:1px solid #444;
    background:#0b0b0b;
    color:#f5f5f5;
    font-size:.9rem;
}
.ex-form-group input:focus{
    outline:none;
    border-color:#d4af37;
    box-shadow:0 0 0 1px rgba(212,175,55,.5);
}
.ex-form-group small{
    font-size:.75rem;
    color:#b0b0b0;
}

/* ===========================
   BOTONES
=========================== */
.ex-btn{
    padding:8px 14px;
    border-radius:6px;
    border:none;
    background:#d4af37;
    color:#111;
    font-weight:600;
    font-size:.95rem;
    cursor:pointer;
}

.ex-login-card .ex-btn{
    width:100%;
    margin-top:4px;
}

.ex-btn:hover{
    background:#f1c94f;
}

.ex-btn-sm{
    padding:6px 10px;
    font-size:.83rem;
}

/* Botón tipo outline (amarillo con fondo transparente) */
.ex-btn-outline{
    background:transparent;
    border:1px solid #d4af37;
    color:#f5f5f5;
    cursor:pointer;
    border-radius:6px;
    padding:6px 10px;
    font-size:.83rem;
}
.ex-btn-outline:hover{
    background:#d4af37;
    color:#111;
}

/* Estados deshabilitados */
.ex-btn[disabled],
.ex-btn-outline[disabled],
.ex-btn-disabled{
    opacity:0.45;
    cursor:default;
    pointer-events:none;
}

/* ===========================
   MENSAJES
=========================== */
.ex-alert{
    padding:7px 9px;
    border-radius:6px;
    font-size:.85rem;
    margin-bottom:10px;
    text-align:left;
}
.ex-error{
    background:#3b0a0a;
    border:1px solid #f87171;
    color:#fecaca;
}
.ex-success{
    background:#064e3b;
    border:1px solid #6ee7b7;
    color:#bbf7d0;
}

/* ===========================
   PANEL INTERNO (EXTRANET)
=========================== */
.ex-panel{
    min-height:100vh;
    display:flex;
    flex-direction:column;
}

.ex-panel-header{
    background:#050505;
    border-bottom:1px solid rgba(255,255,255,.1);
    padding:12px 18px;
    display:flex;
    align-items:center;
    gap:14px;
}
.ex-panel-logo img{
    width:110px;
    height:auto;
}
.ex-panel-titles h1{
    font-size:1.3rem;
}
.ex-panel-titles p{
    font-size:.85rem;
    color:#d4d4d4;
}

/* Menú interno superior */
.ex-panel-menu{
    background:#101010;
    padding:8px 18px;
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}
.ex-menu-item{
    padding:7px 12px;
    border-radius:20px;
    border:1px solid #d4af37;
    color:#f5f5f5;
    font-size:.9rem;
    text-decoration:none;
}
.ex-menu-item:hover{
    background:#d4af37;
    color:#111;
}
.ex-menu-item-active{
    background:#d4af37;
    color:#111;
}
.ex-menu-item-disabled{
    opacity:0.4;
    pointer-events:none;
    cursor:default;
}

/* Contenido principal */
.ex-panel-main{
    flex:1;
    padding:24px 18px 32px;
    background:#050505;
}

.ex-panel-placeholder{
    max-width:520px;
    margin:40px auto 0;
    text-align:center;
}
.ex-panel-placeholder p{
    margin-bottom:6px;
}
.ex-panel-note{
    font-size:.85rem;
    color:#c0c0c0;
}

/* ===========================
   FORMULARIOS INTERNOS
=========================== */
.ex-form-wrapper{
    max-width:1300px;
    width:96%;
    margin:16px auto 0;
    background:radial-gradient(circle at top left,#1f1f1f,#111111 55%);
    border-radius:14px;
    padding:18px 20px 22px;
    box-shadow:0 18px 40px rgba(0,0,0,.8);
    border:1px solid rgba(255,255,255,.08);
}

.ex-form-wrapper h2{
    font-size:1.35rem;
    margin-bottom:4px;
}
.ex-form-intro{
    font-size:.87rem;
    color:#d0d0d0;
    margin-bottom:14px;
}

/* Grid en 2 columnas (Nuevo expediente, usuarios, etc.) */
.ex-form-grid{
    margin-top:4px;
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:12px 20px;
}

.ex-form-group{
    display:flex;
    flex-direction:column;
}
.ex-form-group-full{
    grid-column:1 / -1;
}

.ex-form-group label{
    font-size:.84rem;
    margin-bottom:4px;
    color:#f3f3f3;
}

.ex-form-group input,
.ex-form-group textarea{
    border-radius:7px;
    border:1px solid #333;
    background:#0c0c0c;
    color:#f5f5f5;
    font-size:.9rem;
    padding:7px 9px;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

.ex-form-group textarea{
    resize:vertical;
    min-height:70px;
}

.ex-form-group input::placeholder,
.ex-form-group textarea::placeholder{
    color:#a3a3a3;
    font-size:.85rem;
}

.ex-form-group input:focus,
.ex-form-group textarea:focus{
    outline:none;
    border-color:#d4af37;
    background:#111111;
    box-shadow:0 0 0 1px rgba(212,175,55,.65);
}

/* Pie del formulario (botones alineados a la derecha) */
.ex-form-actions{
    grid-column:1 / -1;
    display:flex;
    justify-content:flex-end;
    margin-top:4px;
}
.ex-form-actions .ex-btn{
    min-width:180px;
}

/* Indicador de campo obligatorio */
.ex-required{
    color:#f97316;
    font-weight:700;
    font-size:.8rem;
}

/* Mensajes bajo campos (validación) */
.ex-field-hint{
    display:block;
    margin-top:2px;
    font-size:.8rem;
    color:#c0c0c0;
}
.ex-field-error{
    color:#fecaca;
}
.ex-field-ok{
    color:#bbf7d0;
}

/* Responsive formularios */
@media (max-width:780px){
    .ex-form-grid{
        grid-template-columns:1fr;
    }
}

/* ===========================
   TOOLBAR EXPEDIENTES
=========================== */
.ex-toolbar{
    display:flex;
    flex-direction:column;   /* filtro arriba, botones abajo */
    gap:8px;
    margin-bottom:12px;
}

.ex-search-form{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:6px;
}

.ex-search-form label{
    font-size:.82rem;
}

.ex-select,
.ex-input-search{
    border-radius:6px;
    border:1px solid #444;
    background:#0b0b0b;
    color:#f5f5f5;
    padding:6px 8px;
    font-size:.86rem;
}

.ex-input-search{
    min-width:260px;
}

/* Fila de botones debajo del filtro */
.ex-toolbar-actions{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
}

/* ===========================
   DATAGRID / TABLA EXPEDIENTES
=========================== */

/* wrapper: en HTML usas ex-table-wrapper */
.ex-table-wrapper,
.ex-table-wrap{
    margin-top:8px;
    border-radius:10px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    background:#090909;
}

.ex-table{
    width:100%;
    border-collapse:collapse;
    font-size:.83rem;
}

.ex-table thead{
    background:#151515;
}

.ex-table th{
    text-align:left;
    font-weight:500;
    color:#f3f3f3;
    padding:6px 8px;
}

.ex-table td{
    padding:6px 8px;
    border-bottom:1px solid #222;
}

/* Filas */
.ex-table tbody tr{
    cursor:pointer;
    transition:background .12s ease, box-shadow .12s ease;
}

/* Hover suave */
.ex-table tbody tr:hover{
    background:#181818;
}

/* Fila seleccionada (la clase se agrega con JS) */
.ex-table tbody tr.ex-row-selected{
    background:#272727 !important;
    box-shadow:0 0 0 1px #d4af37 inset;
}

/* Columnas típicas (por si quieres fijar anchos) */
.ex-table .col-nro{ width:50px; }
.ex-table .col-codigo{ width:110px; }
.ex-table .col-nroexp{ width:190px; }
.ex-table .col-fecha{ width:90px; }
.ex-table .col-materia{ width:120px; }

/* ===========================
   FIN CSS
=========================== */