/* =========================
   BASE
========================= */

*{
    box-sizing:border-box;
}

html{
    -webkit-text-size-adjust:100%;
}

body{
    margin:0;
    padding:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#ffffff;
    color:#222;
    line-height:1.45;
}

a{
    color:inherit;
}

img{
    max-width:100%;
    height:auto;
}

/* =========================
   LOGO
   El tamaño real del logo del header
   se controla en includes/header.php
========================= */

.logo-area{
    display:flex;
    align-items:center;
    margin-right:0;
}

.logo-main{
    height:auto;
    width:auto;
    display:block;
}

.container{
    width:100%;
    max-width:1280px;
    margin:0 auto;
    padding:16px 22px 28px;
}

h1,h2,h3,h4,h5,h6{
    margin-top:0;
    margin-bottom:10px;
    color:#222;
    line-height:1.15;
}

p{
    margin-top:0;
}

.muted{
    color:#777;
}

hr{
    border:none;
    border-top:1px solid #ececec;
    margin:18px 0;
}

/* =========================
   TOPBAR
========================= */

.topbar{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    align-items:center;
    margin-bottom:12px;
}

/* =========================
   BOTONES
========================= */

.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:44px;
    padding:10px 16px;
    border:1px solid #d4d4d4;
    border-radius:14px;
    background:#fff;
    text-decoration:none;
    font-size:15px;
    color:#333;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}

.btn:hover{
    background:#f8f8f8;
    border-color:#c9c9c9;
}

.btn:active{
    transform:translateY(1px);
}

.btn:focus,
button:focus,
input:focus,
select:focus,
textarea:focus{
    outline:none;
}

.btn-primary{
    background:#d89412;
    color:#fff;
    border-color:#d89412;
}

.btn-primary:hover{
    background:#bf8010;
    border-color:#bf8010;
}

.btn-success{
    background:#2f7d1f;
    color:#fff;
    border-color:#2f7d1f;
}

.btn-success:hover{
    background:#27691a;
    border-color:#27691a;
}

.btn-danger{
    background:#fff5f5;
    color:#9b1c1c;
    border-color:#efc3c3;
}

.btn-danger:hover{
    background:#ffecec;
    border-color:#e8b2b2;
}

/* =========================
   FORMULARIOS
========================= */

form{
    margin:0;
}

label{
    display:inline-block;
    margin-bottom:6px;
    font-size:14px;
    font-weight:700;
    color:#333;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="date"],
input[type="search"],
input[type="tel"],
select,
textarea{
    width:100%;
    max-width:100%;
    min-height:46px;
    padding:12px 14px;
    border:1px solid #cfcfcf;
    border-radius:14px;
    background:#fff;
    color:#222;
    font-size:16px;
    transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
    appearance:none;
    -webkit-appearance:none;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
select:focus,
textarea:focus{
    border-color:#d89412;
    box-shadow:0 0 0 3px rgba(216,148,18,.12);
    background:#fff;
}

textarea{
    min-height:120px;
    resize:vertical;
}

input[type="checkbox"]{
    width:18px;
    height:18px;
    accent-color:#d89412;
}

.form-row,
.row{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
}

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

.form-grid-3{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px;
}

.check-row{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

/* =========================
   TARJETAS / BLOQUES
========================= */

.card{
    background:#fff;
    border:1px solid #e4e4e4;
    border-radius:18px;
    padding:18px;
    box-shadow:0 6px 18px rgba(0,0,0,.04);
}

.card-soft{
    background:#fff;
    border:1px solid #e4e4e4;
    border-radius:18px;
    padding:16px;
    box-shadow:0 6px 18px rgba(0,0,0,.04);
}

.soft-box{
    margin-top:14px;
    padding:14px;
    border:1px solid #e6e6e6;
    background:#fafafa;
    border-radius:14px;
}

.empty-box{
    background:#fff;
    border:1px dashed #d7d7d7;
    border-radius:16px;
    padding:18px;
    color:#777;
}

/* =========================
   MENSAJES
========================= */

.msg-ok{
    margin-bottom:14px;
    padding:12px 14px;
    border:1px solid #b8e1c2;
    background:#eefaf0;
    color:#20663a;
    border-radius:12px;
}

.msg-err{
    margin-bottom:14px;
    padding:12px 14px;
    border:1px solid #efb0b0;
    background:#fff1f1;
    color:#9b1c1c;
    border-radius:12px;
}

/* =========================
   TABLAS
========================= */

.table-wrap{
    width:100%;
    overflow-x:auto;
    border-radius:16px;
}

table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:#fff;
    border:1px solid #e2e2e2;
    border-radius:16px;
    overflow:hidden;
}

th{
    text-align:left;
    padding:14px 14px;
    background:#f7f7f7;
    border-bottom:1px solid #e2e2e2;
    font-size:14px;
    font-weight:700;
    color:#333;
    vertical-align:top;
}

td{
    padding:14px 14px;
    border-bottom:1px solid #efefef;
    vertical-align:top;
    font-size:15px;
    color:#222;
}

tr:last-child td{
    border-bottom:none;
}

tbody tr:hover td{
    background:#fcfcfc;
}

/* =========================
   BADGES
========================= */

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:30px;
    padding:4px 11px;
    border-radius:999px;
    font-size:12px;
    font-weight:700;
    line-height:1.2;
    border:1px solid #d0d7de;
    background:#f8f8f8;
    color:#333;
    text-transform:capitalize;
    white-space:nowrap;
}

/* =========================
   ESTADOS PEDIDOS
========================= */

.badge-pendiente{
    background:#fff8d6;
    border-color:#e5cf6b;
    color:#8a6500;
}

.badge-aprobado{
    background:#eaf1ff;
    border-color:#99b9eb;
    color:#1f5fa8;
}

.badge-rechazado{
    background:#ffeaea;
    border-color:#e19c9c;
    color:#a10000;
}

.badge-entregado{
    background:#eaf7ee;
    border-color:#9bd0a9;
    color:#1d6b32;
}

.badge-cancelado{
    background:#f5f5f5;
    border-color:#d7d7d7;
    color:#666;
}

/* =========================
   ESTADOS INCUBACION
========================= */

.badge-activo{
    background:#eaf1ff;
    border-color:#99b9eb;
    color:#1f5fa8;
}

.badge-en_nacedora{
    background:#fff8d6;
    border-color:#e5cf6b;
    color:#8a6500;
}

.badge-finalizado{
    background:#eaf7ee;
    border-color:#9bd0a9;
    color:#1d6b32;
}

/* =========================
   COLORES DE TEXTO
========================= */

.texto-verde{
    color:#1d6b32;
}

.texto-amarillo{
    color:#8a6500;
}

.texto-rojo{
    color:#a10000;
}

.texto-azul{
    color:#1f5fa8;
}

/* =========================
   PISOS INCUBADORAS
========================= */

.piso{
    border:1px solid #ddd;
    padding:14px;
    border-radius:14px;
    margin-top:12px;
}

.piso-verde{
    background:#eaf7ee;
    border-color:#9bd0a9;
}

.piso-amarillo{
    background:#fff6cf;
    border-color:#e5cf6b;
}

.piso-azul{
    background:#e6f0ff;
    border-color:#99b9eb;
}

.piso-rojo{
    background:#fde6e6;
    border-color:#e19c9c;
}

.piso-gris{
    background:#f3f3f3;
    border-color:#d7d7d7;
}

/* =========================
   BARRAS DE PROGRESO
========================= */

.progress-bar{
    width:100%;
    height:16px;
    background:#ddd;
    border-radius:999px;
    overflow:hidden;
}

.progress-fill{
    height:100%;
    background:#3f8f5b;
    border-radius:999px;
}

/* =========================
   BLOQUES DE ESTADISTICAS
========================= */

.stats-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px;
}

.stats-grid-4{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:14px;
}

.stat-label{
    display:block;
    color:#666;
    font-size:13px;
    margin-bottom:5px;
}

.stat-big{
    font-size:28px;
    font-weight:700;
    color:#222;
    line-height:1.05;
}

.stat-sub{
    margin-top:8px;
    color:#666;
    font-size:13px;
}

/* =========================
   UTILIDADES
========================= */

.page-wrap{
    max-width:1200px;
    margin:0 auto;
}

.page-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.page-title{
    margin:0;
    font-size:34px;
    line-height:1.1;
}

.page-sub{
    margin-top:6px;
    color:#666;
    font-size:14px;
}

.section{
    margin-top:20px;
}

.section-title{
    margin:0 0 12px 0;
    font-size:24px;
    line-height:1.15;
    color:#222;
}

.section-sub{
    color:#666;
    font-size:14px;
    margin:0 0 14px 0;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 980px){
    .stats-grid,
    .stats-grid-4,
    .form-grid-3{
        grid-template-columns:repeat(2, 1fr);
    }
}

@media (max-width: 700px){
    .container{
        padding:14px 14px 24px;
    }

    .page-title{
        font-size:28px;
    }

    .section-title{
        font-size:22px;
    }

    .form-grid,
    .form-grid-3,
    .stats-grid,
    .stats-grid-4{
        grid-template-columns:1fr;
    }

    .topbar{
        flex-direction:column;
        align-items:stretch;
    }

    .topbar .btn,
    .topbar button.btn{
        width:100%;
        box-sizing:border-box;
    }

    .card,
    .card-soft{
        padding:16px;
        border-radius:16px;
    }

    th, td{
        padding:12px 12px;
    }

    .btn{
        width:100%;
    }
}