:root {
    font-family: Arial, Helvetica, sans-serif;
    color: #17212b;
    background: #f4f7fb;
    --copaco-blue: #075cab;
    --copaco-dark: #082b67;
    --border: #d7e0e8;
    --danger: #a11a1a;
}
* { box-sizing: border-box; }
body { margin: 0; background: linear-gradient(180deg, #f7f9fc 0%, #eef3f8 100%); }
.wrap { width: min(1180px, calc(100% - 32px)); margin: 32px auto; }
.card { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 28px; box-shadow: 0 12px 30px rgba(8,43,103,.08); }
.card-header { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.brand-mark { display: grid; place-items: center; flex: 0 0 58px; width: 58px; height: 58px; border-radius: 50%; background: var(--copaco-blue); color: #fff; font-size: 30px; }
h1 { margin: 0 0 6px; color: var(--copaco-dark); font-size: clamp(1.7rem, 3vw, 2.25rem); }
p { line-height: 1.55; }
.grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin: 26px 0 18px; }
label { display: grid; align-content: start; gap: 7px; font-weight: 700; }
small { font-weight: 400; color: #5b6875; line-height: 1.3; }
input, select, button { min-height: 46px; border-radius: 8px; font: inherit; }
input, select { width: 100%; padding: 10px 12px; border: 1px solid #aebdca; background: #fff; }
input:focus, select:focus { outline: 3px solid rgba(7,92,171,.18); border-color: var(--copaco-blue); }
.actions { display: flex; align-items: center; gap: 12px; }
button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-width: 128px; padding: 10px 22px; border: 0; background: var(--copaco-blue); color: #fff; font-weight: 700; cursor: pointer; }
button:hover { background: #064f94; }
button:focus-visible { outline: 3px solid rgba(7,92,171,.35); outline-offset: 2px; }
button:disabled { opacity: .72; cursor: wait; }
.spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
button.is-loading .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.status { min-height: 26px; margin-top: 14px; color: var(--danger); font-weight: 600; }
.status.success { color: #176b32; }
.results { margin-top: 20px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 12px; border-bottom: 1px solid #e3e8ed; text-align: left; vertical-align: top; }
th { background: var(--copaco-dark); color: #fff; }
tbody tr:nth-child(even) { background: #f8fafc; }
tbody tr:hover { background: #eef5fb; }
.download { display: inline-block; white-space: nowrap; padding: 8px 11px; border-radius: 7px; background: var(--copaco-blue); color: #fff; text-decoration: none; font-weight: 700; }
.download:hover { background: #064f94; }
.notice { padding: 14px; background: #f1f5f9; border-left: 4px solid var(--copaco-blue); border-radius: 7px; }
.privacy-note { margin: 20px 0 0; color: #5b6875; font-size: .9rem; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
    .wrap { width: min(100% - 20px, 1180px); margin: 18px auto; }
    .card { padding: 18px; }
    .card-header { align-items: flex-start; }
    .brand-mark { flex-basis: 48px; width: 48px; height: 48px; font-size: 25px; }
    .grid { grid-template-columns: 1fr; }
    button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

/* ==========================================
   LOGO COPACO
========================================== */

.brand-mark{
    background:none;
    width:auto;
    height:auto;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:18px;
    flex-shrink:0;
}

.logo-copaco{
    width:180px;
    height:auto;
    display:block;
}

/* ======================================================
   RESPONSIVE PARA CELULARES
====================================================== */

@media (max-width: 768px){

    .wrap{
        padding:15px;
    }

    .card{
        padding:20px;
    }

    .card-header{
        flex-direction:column;
        align-items:center;
        text-align:center;
    }

    .brand-mark{
        margin:0 0 20px 0;
    }

    .logo-copaco{
        width:180px;
        max-width:90%;
        height:auto;
    }

    .card-header h1{
        font-size:24px;
        line-height:1.25;
        margin-bottom:10px 0;
    }

    .card-header p{
        font-size:15px;
        line-height:1.5;
        max-width:320px;
        margin:auto;
    }

    .grid{
        grid-template-columns:1fr;
    }

    button{
        width:100%;
    }

}

/* ======================================================
   RESULTADOS DE CONSULTA
====================================================== */

.results-panel{
    margin-top:24px;
}

.results-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    margin-bottom:14px;
}

.results-heading h2{
    margin:0 0 4px;
    color:var(--copaco-dark);
    font-size:1.35rem;
}

.results-heading p{
    margin:0;
    color:#5b6875;
    font-size:.95rem;
}

.empty-state{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-top:22px;
    padding:18px;
    border:1px solid #cddcea;
    border-left:5px solid var(--copaco-blue);
    border-radius:10px;
    background:#f5f9fd;
}

.empty-state-icon{
    display:grid;
    place-items:center;
    flex:0 0 34px;
    width:34px;
    height:34px;
    border-radius:50%;
    background:var(--copaco-blue);
    color:#fff;
    font-weight:700;
    font-family:Georgia, serif;
}

.empty-state strong{
    display:block;
    margin-bottom:4px;
    color:var(--copaco-dark);
    font-size:1rem;
}

.empty-state p{
    margin:0;
    color:#52606d;
}

/* Tabla convertida en tarjetas para celulares */

@media (max-width:768px){

    .results-heading{
        display:block;
    }

    .table-scroll{
        overflow:visible;
        border:0;
    }

    table,
    thead,
    tbody,
    tr,
    th,
    td{
        display:block;
        width:100%;
    }

    thead{
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip:rect(0 0 0 0);
        white-space:nowrap;
    }

    tbody{
        display:grid;
        gap:16px;
    }

    tbody tr{
        padding:16px;
        border:1px solid var(--border);
        border-radius:12px;
        background:#fff;
        box-shadow:0 5px 16px rgba(8,43,103,.07);
    }

    tbody tr:nth-child(even),
    tbody tr:hover{
        background:#fff;
    }

    tbody td{
        display:grid;
        grid-template-columns:minmax(115px, 38%) 1fr;
        gap:12px;
        padding:9px 0;
        border-bottom:1px solid #edf1f4;
        overflow-wrap:anywhere;
    }

    tbody td:last-child{
        border-bottom:0;
        padding-top:15px;
    }

    tbody td::before{
        content:attr(data-label);
        color:#4b5966;
        font-weight:700;
    }

    .download{
        display:block;
        width:100%;
        padding:11px 14px;
        text-align:center;
    }
}
/*=================================================
    PANEL INFORMACIÓN
=================================================*/

.info-panel{
    display:flex;
    align-items:flex-start;
    gap:18px;
    margin-top:30px;
    margin-bottom:20px;
    padding:18px 22px;
    background:#eef6ff;
    border-left:6px solid #0b5cad;
    border-radius:10px;
}

.info-panel-icon{
    width:42px;
    height:42px;
    min-width:42px;
    border-radius:50%;
    background:#0b5cad;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:bold;
    font-family:Arial,sans-serif;
}

.info-panel-content h2{
    margin:0 0 10px;
    color:#0b3b82;
    font-size:22px;
}

.info-panel-content ul{
    margin:0;
    padding-left:20px;
}

.info-panel-content li{
    margin-bottom:8px;
    line-height:1.5;
}

/* Responsive */

@media (max-width:768px){

    .info-panel{
        flex-direction:column;
        align-items:center;
        text-align:left;
    }

    .info-panel-content h2{
        text-align:center;
    }

}
/*==============================================
    BOTÓN CONSULTAR
==============================================*/

#search{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    transition:all .25s ease;

}

#search:hover{

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(11,92,173,.25);

}

#search:active{

    transform:translateY(0);

}

.button-icon{

    font-size:18px;

}

.button-label{

    font-weight:600;

}

/* ======================================================
   RESULTADOS PROFESIONALES
====================================================== */

.results-panel{
    margin-top:28px;
    animation:resultsAppear .35s ease-out;
}

.results-heading{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
    padding:16px 18px;
    border-left:5px solid #168447;
    border-radius:10px;
    background:#edf9f2;
}

.results-check{
    display:grid;
    place-items:center;
    flex:0 0 38px;
    width:38px;
    height:38px;
    border-radius:50%;
    background:#168447;
    color:#fff;
    font-size:22px;
    font-weight:700;
}

.results-heading h2{
    margin:0 0 3px;
    color:#0b3b82;
    font-size:21px;
}

.results-heading p{
    margin:0;
    color:#475569;
}

.documents-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:18px;
}

.document-card{
    overflow:hidden;
    padding:20px;
    border:1px solid #d5e0ea;
    border-top:5px solid #0b5cad;
    border-radius:13px;
    background:#fff;
    box-shadow:0 7px 20px rgba(8,43,103,.08);
    transition:transform .2s ease, box-shadow .2s ease;
}

.document-card:hover{
    transform:translateY(-3px);
    box-shadow:0 11px 25px rgba(8,43,103,.13);
}

.document-card-header{
    display:flex;
    align-items:center;
    gap:13px;
    margin-bottom:17px;
}

.document-card-header h3{
    margin:0 0 3px;
    color:#0b3b82;
    font-size:17px;
}

.document-card-header p{
    margin:0;
    color:#64748b;
    font-size:14px;
}

.document-icon{
    display:grid;
    place-items:center;
    flex:0 0 48px;
    width:48px;
    height:48px;
    border-radius:10px;
    background:#c62828;
    color:#fff;
    font-size:12px;
    font-weight:800;
    letter-spacing:.4px;
}

.document-data{
    margin:0 0 18px;
}

.document-data > div{
    display:grid;
    grid-template-columns:135px 1fr;
    gap:12px;
    padding:9px 0;
    border-bottom:1px solid #edf1f5;
}

.document-data dt{
    color:#52606d;
    font-weight:700;
}

.document-data dd{
    min-width:0;
    margin:0;
    color:#17212b;
    overflow-wrap:anywhere;
}

.download-button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    width:100%;
    padding:12px 16px;
    border-radius:8px;
    background:#0b63b6;
    color:#fff;
    text-decoration:none;
    font-weight:700;
    transition:background .2s ease, transform .2s ease;
}

.download-button:hover{
    background:#084f92;
    color:#fff;
    transform:translateY(-1px);
}

.empty-state{
    display:flex;
    align-items:flex-start;
    gap:14px;
    margin-top:26px;
    padding:19px;
    border:1px solid #c9dbea;
    border-left:5px solid #0b5cad;
    border-radius:10px;
    background:#f1f7fd;
}

.empty-state-icon{
    display:grid;
    place-items:center;
    flex:0 0 36px;
    width:36px;
    height:36px;
    border-radius:50%;
    background:#0b5cad;
    color:#fff;
    font-family:Georgia, serif;
    font-size:21px;
    font-weight:700;
}

.empty-state strong{
    display:block;
    margin-bottom:4px;
    color:#0b3b82;
}

.empty-state p{
    margin:0;
    color:#52606d;
}

@keyframes resultsAppear{
    from{
        opacity:0;
        transform:translateY(10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media (max-width:900px){

    .documents-grid{
        grid-template-columns:1fr;
    }
}

@media (max-width:560px){

    .results-heading{
        align-items:flex-start;
        padding:15px;
    }

    .results-heading h2{
        font-size:18px;
    }

    .document-card{
        padding:16px;
    }

    .document-data > div{
        grid-template-columns:1fr;
        gap:3px;
    }

    .document-data dt{
        font-size:13px;
    }
}

/* ======================================================
   PIE INSTITUCIONAL
====================================================== */

.institutional-footer{
    margin-top:28px;
    padding-top:4px;
    text-align:center;
    color:#64748b;
    font-size:13px;
}

.footer-line{
    width:100%;
    height:1px;
    margin-bottom:18px;
    background:#dbe3ea;
}

.institutional-footer p{
    margin:4px 0;
}

.institutional-footer span{
    display:inline-block;
    margin-top:7px;
    color:#7b8794;
    font-size:12px;
}

/* ======================================================
   INDICADOR DE AMBIENTE
====================================================== */

.environment-badge{
    display:inline-block;
    margin-top:10px;
    padding:5px 10px;
    border:1px solid #d6a400;
    border-radius:999px;
    background:#fff8d8;
    color:#725700;
    font-size:11px;
    font-weight:700;
    letter-spacing:.3px;
    text-transform:uppercase;
}