*{margin:0;padding:0;box-sizing:border-box;}
body{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background:#d9d9d9;
    display:flex;
    justify-content:center;
    padding:10px;
}
.contenedor{
    width:100%;
    max-width:600px;
}
/* ========== RECUADRO 1 - HEADER ========== */
.header-box{
    background:#b3d9ff;
    border-radius:8px;
    padding:14px 16px;
    text-align:center;
    margin-bottom:10px;
}
.header-box h1{
    font-size:35px;
    color:#1a3a5c;
    margin-bottom:4px;
    letter-spacing:1px;
}
.header-box .ai-info{
    font-size:12px;
    color:#444;
    margin-bottom:2px;
}
.header-box .by-line{
    font-size:20px;
    color:#1a3a5c;
    font-weight:bold;
    margin-bottom:10px;
}
.nav-icons{
    display:flex;
    justify-content:center;
    gap:16px;
}
.nav-icons a{
    display:inline-block;
    width:42px;
    height:42px;
    border-radius:50%;
    text-align:center;
    line-height:42px;
    font-size:20px;
    font-weight:bold;
    text-decoration:none;
}
.nav-veh{background:#2ecc71;color:#fff;}
.nav-srv{background:#f1c40f;color:#333;}
.nav-web{background:#3498db;color:#fff;}

/* ========== RECUADRO 2 - VEHICULOS ========== */
.veh-box{
    background:#fff;
    border-radius:8px;
    padding:12px 14px;
    margin-bottom:10px;
}
.veh-box h2{
    font-size:16px;
    margin-bottom:8px;
    color:#333;
    border-bottom:1px solid #eee;
    padding-bottom:5px;
}
/* 3 columnas */
.veh-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:8px;
}
.veh-pill{
    display:block;
    background:#e8f4e8;
    border:1px solid #b8dcb8;
    border-radius:20px;
    text-align:center;
    padding:8px 4px;
    font-size:13px;
    color:#2c6b2c;
    text-decoration:none;
    cursor:pointer;
    transition:all .2s;
}
.veh-pill:hover,.veh-pill.active{
    background:#2ecc71;
    color:#fff;
    border-color:#27ae60;
}

/* ========== RECUADRO 3 - SERVICIOS ========== */
.srv-box{
    background:#fff;
    border-radius:8px;
    padding:12px 14px;
}
.srv-box h2{
    font-size:16px;
    margin-bottom:8px;
    color:#333;
    border-bottom:1px solid #eee;
    padding-bottom:5px;
}
.srv-group-title{
    font-size:14px;
    font-weight:bold;
    color:#1a3a5c;
    padding:6px 0 3px 0;
    margin-top:4px;
    border-bottom:1px dashed #ddd;
}
.srv-group-title small{font-weight:normal;color:#777;font-size:11px;}
.srv-row{
    display:flex;
    align-items:center;
    padding:4px 0;
    border-bottom:1px solid #f5f5f5;
    font-size:13px;
}
.srv-row .srv-date{
    width:85px;
    color:#555;
    flex-shrink:0;
}
.srv-row .srv-desc{
    flex:1;
    color:#333;
}
.srv-row .btn-det{
    display:inline-block;
    width:28px;
    height:28px;
    border-radius:50%;
    background:#3498db;
    color:#fff;
    text-align:center;
    line-height:28px;
    font-size:12px;
    text-decoration:none;
    cursor:pointer;
    flex-shrink:0;
}
.empty-msg{
    text-align:center;
    color:#999;
    padding:20px 0;
    font-style:italic;
}

/* ========== MODAL ========== */
.modal-overlay{
    display:none;
    position:fixed;
    top:0;left:0;right:0;bottom:0;
    background:rgba(0,0,0,0.55);
    z-index:999;
    justify-content:center;
    align-items:center;
}
.modal-overlay.show{display:flex;}
.modal-box{
    background:#fff;
    border-radius:8px;
    padding:20px;
    width:90%;
    max-width:420px;
}
.modal-box h3{font-size:18px;margin-bottom:12px;color:#1a3a5c;}
.modal-box table{width:100%;border-collapse:collapse;}
.modal-box table td{
    padding:6px 4px;
    font-size:13px;
    border-bottom:1px solid #f0f0f0;
}
.modal-box table td:first-child{
    font-weight:bold;
    color:#555;
    width:40%;
}
.modal-close{
    display:block;
    margin:14px auto 0;
    padding:8px 24px;
    background:#e74c3c;
    color:#fff;
    border:none;
    border-radius:4px;
    cursor:pointer;
    font-size:14px;
}

/* ========== CRUD PAGES ========== */
.crud-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}
.crud-header h2{font-size:18px;color:#1a3a5c;}
.btn-add{
    background:#2ecc71;
    color:#fff;
    padding:7px 16px;
    border-radius:20px;
    text-decoration:none;
    font-size:13px;
    font-weight:bold;
}
.list-row{
    display:flex;
    align-items:center;
    padding:7px 10px;
    border-bottom:1px solid #eee;
    font-size:13px;
    background:#fff;
}
.list-row .lr-main{flex:1;}
.list-row .lr-icons{display:flex;gap:8px;flex-shrink:0;}
.icon-btn{
    display:inline-block;
    width:28px;height:28px;
    border-radius:50%;
    text-align:center;
    line-height:28px;
    font-size:13px;
    text-decoration:none;
    cursor:pointer;
    border:none;
}
.btn-edit{background:#f39c12;color:#fff;}
.btn-del{background:#e74c3c;color:#fff;}
.btn-back{
    display:inline-block;
    margin-top:12px;
    padding:7px 16px;
    background:#7f8c8d;
    color:#fff;
    border-radius:4px;
    text-decoration:none;
    font-size:13px;
}

/* ========== FORM ========== */
.form-box{
    background:#fff;
    border-radius:8px;
    padding:16px;
    max-width:500px;
    margin:0 auto;
}
.form-box label{
    display:block;
    font-size:13px;
    font-weight:bold;
    color:#555;
    margin-top:10px;
}
.form-box input,.form-box select{
    width:100%;
    padding:8px;
    border:1px solid #ccc;
    border-radius:4px;
    font-size:14px;
    margin-top:3px;
}
.form-box .btn-submit{
    display:block;
    width:100%;
    padding:10px;
    margin-top:14px;
    background:#2ecc71;
    color:#fff;
    border:none;
    border-radius:4px;
    font-size:15px;
    font-weight:bold;
    cursor:pointer;
}
.msg{text-align:center;padding:8px;margin-bottom:8px;border-radius:4px;font-size:13px;}
.msg-ok{background:#d5f5e3;color:#1e8449;}
.msg-err{background:#fadbd8;color:#c0392b;}