/* ===========================
   SION DESIGN SYSTEM
=========================== */


/* ===========================
   Panel
=========================== */

.sion-panel {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,.06);
    overflow: visible; /* IMPORTANTE */
}

.sion-panel-header {
    background: #3c8dbc;
    color: #fff;
    padding: 12px 15px;
    font-weight: 600;
    font-size: 16px;
    border-radius: 8px 8px 0 0;
}

.sion-panel-body {
    padding: 15px;
    display: block;
}


/* ===========================
   Info Table
=========================== */

.sion-info-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.sion-info-table th,
.sion-info-table td {
    padding: 8px 10px;
    vertical-align: middle;
    border: 1px solid #e3e6ea;
}

.sion-info-label {
    background: linear-gradient(#f0f4f7, #dce6ee);
    font-weight: 600;
    color: #2c3e50;
    width: 20%;
}

.sion-info-value {
    width: 30%;
    color: #444;
}

.tabla-detalle {
    border: 1px solid #ccc;
    border-collapse: collapse;
    width: 100%;
    background-color: #fff;
}
.tabla-detalle th, .tabla-detalle td {
    border: 1px solid #ccc;
    padding: 8px 12px;
    vertical-align: middle;
}
/* Encabezados con sombreado y negrilla */
.tabla-detalle th {
    background: linear-gradient(to bottom, #bed5ebff, #eaeaea);
    font-weight: bold;
    text-align: left;
    color: #333;
}
/* Efecto hover */
.tabla-detalle tr:hover td {
    background-color: #f0f8ff;
}




/* ===========================
   Responsive
=========================== */

@media (max-width: 768px) {

    .sion-panel-body {
        padding: 12px;
    }

    .sion-info-label {
        background: #f5f7fa;
    }
}


/* Móvil */

@media (max-width: 576px) {

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

    .sion-info-table tr {
        margin-bottom: 15px;
        border-bottom: 2px solid #e5e5e5;
        padding-bottom: 10px;
    }

    .sion-info-label {
        margin-top: 6px;
        font-size: 14px;
    }

    .sion-info-value {
        padding-left: 12px;
        font-size: 14px;
        color: #333;
    }
}