@charset "UTF-8";
:root{
    --fondo:#f4f4f5;
    --panel:#ffffff;
    --borde:#e5e7eb;
    --texto:#1f2937;
    --muted:#6b7280;
    --rosa:#AA5283;
    --dorado:#B6804A;
    --malva:#A38090;
    --gris:#7E8096;
    --verde:#608336;
    --azul:#4d5e97;
    --azuloscuro:#24345d;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;background:var(--fondo);color:var(--texto)}
.shell{min-height:100vh;display:flex}
.sidebar{
    width:320px;
    background:linear-gradient(180deg,#fcfcfd 0%,#f6f7f9 100%);
    border-right:1px solid var(--borde);
    box-shadow:10px 0 26px rgba(15,23,42,.06);
    padding:22px 16px;
    overflow: scroll;
    height: 100vh !important;
}
.brand{
    display:flex;
    align-items:center;
    gap:14px;
    background:#fff;
    border:1px solid #ececf1;
    border-radius:22px;
    padding:14px;
    box-shadow:0 6px 18px rgba(15,23,42,.05);
    margin-bottom:18px;
}
.brandicon{
    width:62px;
    height:62px;
    border-radius:18px;
    background:linear-gradient(145deg,var(--azuloscuro) 0%, var(--azul) 100%);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:18px;
    box-shadow:0 8px 18px rgba(36,52,93,.18);
    flex:0 0 auto;
}
.brandlabel{
    font-size:11px;
    color:var(--gris);
    text-transform:uppercase;
    font-weight:700;
    letter-spacing:.8px;
    margin-bottom:3px;
}
.brandtitle{
    font-size:23px;
    line-height:1.02;
    font-weight:700;
}
.brandsubtitle{
    font-size:14px;
    color:#374151;
    margin-top:4px;
}
.navtitle{
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.8px;
    color:var(--gris);
    padding:0 6px 8px;
}
.navitem{
    width:100%;
    min-height:56px;
    border:1px solid #ececf1;
    border-radius:18px;
    background:linear-gradient(180deg,#ffffff 0%,#f8f8fb 100%);
    display:flex;
    align-items:center;
    padding:0 16px;
    font-size:16px;
    font-weight:700;
    color:#263041;
    box-shadow:0 4px 12px rgba(15,23,42,.03);
    margin-bottom:10px;
    text-decoration:none;
}
.navitem.active{
    background:linear-gradient(90deg,var(--azul) 0%,var(--rosa) 100%);
    color:#fff;
    border-color:transparent;
}
.content{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
    overflow: scroll;
    height: 100vh !important;
}
.banner{
    background:#e9eaee;
    border-bottom:1px solid #dddfe5;
    min-height:116px;
    max-height:145px;
    overflow:hidden;
}
.banner img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}
.main{
    padding:24px;
}
.card{
    background:#fff;
    border:1px solid var(--borde);
    border-radius:24px;
    box-shadow:0 12px 30px rgba(15,23,42,.08);
    overflow:hidden;
}
.head{
    padding:24px 24px 12px;
}
.head span{
    display:inline-flex;
    padding:7px 12px;
    border-radius:999px;
    background:rgba(182,128,74,.12);
    color:var(--dorado);
    font-size:12px;
    font-weight:700;
    margin-bottom:12px;
}
.head h1{
    font-size:30px;
    margin-bottom:8px;
}
.head p{
    color:var(--muted);
    line-height:1.6;
    font-size:15px;
}
.alerta{
    margin:0 24px 18px;
    padding:14px 16px;
    border-radius:14px;
    font-size:14px;
}
.error{
    background:#fff1f2;
    color:#9f1239;
    border:1px solid #fecdd3;
}
.ok{
    background:#ecfdf5;
    color:#166534;
    border:1px solid #bbf7d0;
}
.curpmsg{
    margin-top:6px;
    font-size:13px;
    line-height:1.5;
    display:none;
}
.curpmsg.error{
    display:block;
    color:#9f1239;
    background:#fff1f2;
    border:1px solid #fecdd3;
    border-radius:12px;
    padding:10px 12px;
}
.curpmsg.ok{
    display:block;
    color:#166534;
    background:#ecfdf5;
    border:1px solid #bbf7d0;
    border-radius:12px;
    padding:10px 12px;
}
.helper{
    margin-top:6px;
    font-size:12px;
    line-height:1.5;
    color:var(--muted);
}
.form{
    padding:0 24px 24px;
    display:grid;
    /*grid-template-columns:repeat(2,minmax(0,1fr));*/
    grid-template-columns: 1fr;
    /*gap:5px;*/
}
.field{
    display:flex;
    flex-direction:column;
    gap:8px;
}
.field.full{
    grid-column:1/-1;
}
label{
    font-size:14px;
    font-weight:700;
    color:#374151;
}
input[type="text"], input[type="date"],
select{
    height:48px;
    border:1px solid #d1d5db;
    border-radius:14px;
    padding:0 14px;
    font-size:15px;
    outline:none;
    background:#fff;
    width:100%;
}
input[type="text"]:focus, input[type="date"]:focus,
select:focus{
    border-color:var(--azul);
    box-shadow:0 0 0 4px rgba(77,94,151,.10);
}
.note{
    grid-column:1/-1;
    font-size:13px;
    color:var(--muted);
    line-height:1.6;
    background:#fafafa;
    border:1px dashed #d1d5db;
    padding:14px 16px;
    border-radius:14px;
}
.actions{
    grid-column:1/-1;
    display:flex;
    justify-content:flex-end;
}
button{
    height:48px;
    padding:0 24px;
    border:0;
    border-radius:14px;
    background:linear-gradient(90deg,var(--azul) 0%,var(--rosa) 100%);
    color:#fff;
    font-size:15px;
    font-weight:700;
    cursor:pointer;
}
button:disabled{
    opacity:.7;
    cursor:not-allowed;
}
.grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 100px;
    grid-column-gap: 10px;
    background-color: rgba(100,50,70,.7);
    height: 100%;
    width: 100%;
}
.grid-3 {
    display: grid;
    grid-template-columns: 2fr repeat(2 1fr);
    grid-template-rows: 100px;
    grid-column-gap: 10px;
    background-color: rgba(100,50,70,.7);
    width: 100%;
    height: 100%;
}

.column {
    /*font-family: 'Output Sans', -apple-system, BlinkMacSystemFont, 
    "Segoe UI", "Roboto", "Oxygen", 
    "Ubuntu", "Cantarell", "Fira Sans", 
    "Droid Sans", "Helvetica Neue", sans-serif;*/
    color: white;
    text-transform: uppercase;
    font-size: 9px;
    /*background-color: rgba(0,0,0,.2);*/
    /*justify-content: center;*/
    /*align-items: center;*/
    display: column;
}
.column1-field{
    display: grid;
    grid-template-areas: "obj1" "obj2" "obj3" "obj4" "obj5" "obj6";
    grid-template-columns:1fr;
    grid-template-rows: auto auto auto auto auto auto;
    gap: 8px;
    /*padding-left: 1.6em;
    padding-right:1.6em;*/
    margin-bottom: 12px;
    width: 100%;
}
.column2-field{
    display: grid;
    grid-template-areas: "obj1 obj2" "obj3 obj4" "obj5 obj6";
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto auto auto;
    gap: 8px;
    /*padding-left: 1.6em;
    padding-right:1.6em;*/
    margin-bottom: 12px;
    width: 100%;
}
.column3-field{
    display: grid;
    grid-template-areas: "obj1 obj2 obj3" "obj4 obj5 obj6";
    grid-template-columns: 1fr repeat(2, 25%);
    grid-template-rows:auto auto;
    column-gap: 8px;
    margin-bottom: 12px;
    width:100%;
}
.column3e-field{
    display: grid;
    grid-template-areas: "obj1 obj2 obj3" "obj4 obj5 obj6";
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows:auto auto;
    column-gap: 8px;
    margin-bottom: 12px;
    width:100%;
}
.column4-field{
    display: grid;
    grid-template-areas: "obj1 obj2 obj3 obj4" "obj5 obj5 obj6 obj6";
    grid-template-columns: 1fr repeat(3, 25%);
    grid-template-rows: auto auto;
    column-gap: 8px;
    margin-bottom: 12px;
    width:100%;
}
.column5-field{
    display: grid;
    grid-template-areas: "obj1 obj2 obj3 obj4 obj5";
    grid-template-columns: 17% 1fr repeat(3, 17%);
    grid-template-rows: auto;
    column-gap: 8px;
    margin-bottom: 12px;
    width:100%;
}
.column-field-item1{
    grid-area: obj1;
}
.column-field-item2{
    grid-area: obj2;
}
.column-field-item3{
    grid-area: obj3;
}
.column-field-item4{
    grid-area: obj4;
}
.column-field-item5{
    grid-area: obj5;
}
.column-field-item6{
    grid-area: obj6;
}
.form-field{
    grid-column: span 2;
    display: grid;
    grid-template-columns: subgrid;
    border: solid;
}
.label{
    grid-row: 1;
}
.input, .select{
    grid-row: 2;
}

.table-container{
    max-height: 600px; /* Altura máxima antes de hacer scroll */
    overflow-y: scroll;
}
table{
    width: 100%;
    border-collapse: separate; /* Recomendado para sticky */
    border-spacing: 0;
}
thead th{
    padding-left: .5em;
    padding-right: .5em;
    padding-top: .6em;
    padding-bottom: .6em;
    border:1px solid #FFF;
    border-radius: .2em .2em 0 0;
    font-weight: bold;
    position: -webkit-sticky; /* Soporte para Safari */
    position: sticky;
    top: 0;
    background-color: #8FB996; /* Color de fondo obligatorio */
    color: #000;
    z-index: 10; /* Asegura que esté por encima del cuerpo */
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); /* Sombra opcional */
    height: 16px;
}
tbody td{
    padding-left:.5em;
    padding-right:.5em;
    padding-top:.6em;
    padding-bottom:.6em;
    border:1px solid #444444;
    height: 1rem;
}
.tbc{
    width: 100%;
    table-layout: fixed;
    border-collapse: separate; /* Recomendado para sticky */
    border-spacing: 0;
}
.tbc tr{
    width: 100%;
    border: 1px solid #444444;
}
.tbc thead tr:first-child th:first-child{
    border-radius: 1em 0 0 1em;
    -moz-border-radius: 1em 0 0 1em;
    -o-border-radius: 1em 0 0 1em;
    -webkit-border-radius: 1em 0 0 1em;
}
.tbc thead tr:first-child th:last-child{
    border-radius: 0 1em 1em 0;
    -moz-border-radius: 0 1em 1em 0;
    -o-border-radius: 0 1em 1em 0;
    -webkit-border-radius: 0 1em 1em 0;
}
.tbc thead th{
    padding-left: .5em;
    padding-right: .5em;
    padding-top: .6em;
    padding-bottom: .6em;
    border:1px solid #FFF;
    font-weight: bold;
    position: -webkit-sticky; /* Soporte para Safari */
    position: sticky;
    top: 0;
    /*background-color: #8FB996; /* Color de fondo obligatorio */
    background: linear-gradient(#B5804A, #C6A483);
    /*background: linear-gradient(salmon, lightsalmon);*/
    color: white;
    z-index: 10; /* Asegura que esté por encima del cuerpo */
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1); /* Sombra opcional */
    height: 16px;
    text-transform: uppercase;
}
.tbc tbody tr th:first-child{
    border-left: 1px solid #666666;
    -moz-border-left: 1px solid #666666;
    -o-border-left: 1px solid #666666;
    -webkit-border-left: 1px solid #666666;
    border-radius: 1em 0 0 1em;
    -moz-border-radius: 1em 0 0 1em;
    -o-border-radius: 1em 0 0 1em;
    -webkit-border-radius: 1em 0 0 1em;
}
.tbc tbody tr th:last-child{
    border-right: 1px solid #666666;
    -moz-border-right: 1px solid #666666;
    -o-border-right: 1px solid #666666;
    -webkit-border-right: 1px solid #666666;
    border-radius: 0 1em 1em 0;
    -moz-border-radius: 0 1em 1em 0;
    -o-border-radius: 0 1em 1em 0;
    -webkit-border-radius: 0 1em 1em 0;
}
.tbc tbody td{
    padding-left:.5em;
    padding-right:.5em;
    padding-top:.6em;
    padding-bottom:.6em;
    border:none;
    border-bottom:1px solid #666666;
    height: 1rem;
    word-wrap: break-word;
}
.tbc caption{
    caption-side:top;
    font-size: 1.5em;
    margin: .5em 0 .75em;
}
.table-cell-center{
    text-align: center;
}

.panel-principal{
    background:#fff;
    border:1px solid var(--borde);
    border-radius:8px;
    box-shadow:var(--sombra);
    overflow:hidden;
}
.encabezado-panel{padding:26px 28px 12px}
.etiqueta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:7px 13px;
    border-radius:8px;
    background:rgba(182,128,74,.12);
    color:var(--dorado);
    font-size:12px;
    font-weight:700;
    margin-bottom:12px;
}
.encabezado-panel h1{font-size:32px;line-height:1.08;margin-bottom:10px;color:#1f2937}
.encabezado-panel p{font-size:15px;color:var(--muted);line-height:1.6;max-width:860px}
.rejilla-acciones{
    padding:18px 28px 28px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;
}
.tarjeta-accion{
    border:1px solid var(--borde);
    border-radius:8px;
    background:linear-gradient(180deg,#ffffff 0%,#fafafb 100%);
    padding:22px;
    box-shadow:0 6px 18px rgba(15,23,42,.04);
}
.tarjeta-accion h2{font-size:21px;margin-bottom:8px}
.tarjeta-accion p{font-size:14px;color:var(--muted);line-height:1.55;margin-bottom:16px}
.boton{
    min-width:170px;
    min-height:46px;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-size:14px;
    font-weight:700;
    padding:12px 18px;
}
.boton-primario{background:linear-gradient(90deg,var(--azul) 0%,var(--rosa) 100%);color:#fff}
.nota{
    margin:0 28px 28px;
    border:1px dashed #d8dbe4;
    border-radius:8px;
    background:#fafafa;
    padding:16px 18px;
    font-size:14px;
    line-height:1.6;
    color:#4b5563;
}
@media (max-width:980px){
    .shell{flex-direction:column}
    .sidebar{
        width:100%;
        border-right:0;
        border-bottom:1px solid var(--borde);
        box-shadow:none;
        height: fit-content !important;
    }
    .main{padding:18px}
}
@media (max-width:780px){
    .form{grid-template-columns:1fr}
    .column1-field, .column2-field, .column3-field, .column3e-field, .column4-field, .column5-field{
        display: grid;
        grid-template-areas: "obj1" "obj2" "obj3" "obj4" "obj5" "obj6";
        grid-template-columns: 1fr;
    }
    .head h1{font-size:25px}
}
@media (max-width:640px){
    .main{padding:14px}
    .head,.form{padding-left:18px;padding-right:18px}
    .column1-field, .column2-field, .column3-field, .column3e-field, .column4-field, .column5-field{
        display: grid;
        grid-template-areas: "obj1" "obj2" "obj3" "obj4" "obj5" "obj6";
        grid-template-columns: 1fr;
    }
}