/* =========================================================
   FONSERVI APP – ESTILO 2025
   Profesional · Limpio · Móvil primero
========================================================= */

/* GENERAL ------------------------------------------------ */

html, body {
    margin:0;
    padding:0;
    font-family: "Inter", Arial, sans-serif;
    background:#F6F6F6;
    color:#333;
}

h1, h2, h3, h4 {
    margin:0;
    font-weight:600;
}

input, textarea, select {
    width:100%;
    padding:10px;
    font-size:14px;
    border:1px solid #BDBDBD;
    border-radius:6px;
    background:white;
    outline:none;
    box-sizing:border-box;
}

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

input:focus, textarea:focus, select:focus {
    border-color:#D81B60;
    box-shadow:0 0 4px rgba(216,27,96,0.4);
}

/* HEADER ------------------------------------------------ */

.header-bar {
    background:#D81B60;
    color:white;
    padding:12px 14px;
    font-size:16px;
    font-weight:bold;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.btn-logout, .header-actions button {
    background:white;
    border:none;
    color:#D81B60;
    font-weight:600;
    padding:6px 12px;
    border-radius:6px;
    cursor:pointer;
    font-size:13px;
}

.btn-logout:hover {
    background:#FFE3EE;
}

/* MAIN -------------------------------------------------- */

.main-container {
    padding:14px;
}

/* CARD -------------------------------------------------- */

.card {
    background:white;
    border-radius:12px;
    padding:14px;
    margin-bottom:14px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.card-body {
    padding:4px 0;
}

/* BOTONES ---------------------------------------------- */

.btn {
    border:none;
    border-radius:6px;
    padding:10px 14px;
    font-size:14px;
    cursor:pointer;
    font-weight:600;
}

.btn-primary {
    background:#D81B60;
    color:white;
}

.btn-primary:hover {
    background:#C2185B;
}

.btn-secondary {
    background:#424242;
    color:white;
}

.btn-secondary:hover {
    background:#212121;
}

.btn-sm {
    padding:6px 10px;
    font-size:13px;
}

.btn-block {
    width:100%;
}

/* BADGES ----------------------------------------------- */

.badge-estado {
    padding:4px 8px;
    border-radius:6px;
    font-size:12px;
    font-weight:600;
    color:white;
}

.badge-Pendiente { background:#616161; }
.badge-En\ curso { background:#0277BD; }
.badge-Finalizado { background:#2E7D32; }
.badge-Revisado { background:#6A1B9A; }

/* FORM GROUPS ------------------------------------------- */

.form-group {
    margin-bottom:14px;
}

.form-row-2 {
    display:flex;
    gap:10px;
}

.form-row-2 .form-group {
    width:100%;
}

/* TÉCNICO LISTA ------------------------------------------ */

.trabajo-card {
    background:white;
    border-radius:10px;
    padding:12px;
    margin-bottom:12px;
    box-shadow:0 2px 6px rgba(0,0,0,0.1);
    border-left:6px solid #9E9E9E;
    cursor:pointer;
    transition:0.15s;
}

.trabajo-card:hover {
    transform:scale(1.01);
}

.t-title {
    font-size:15px;
    font-weight:bold;
    margin-bottom:3px;
}

.t-exp {
    font-size:13px;
    color:#555;
}

.t-info {
    margin-top:6px;
    font-size:13px;
    color:#444;
}

/* FIRMAS ------------------------------------------------- */

.firma-canvas {
    width:100%;
    height:180px;
    background:white;
    border:1px solid #bbb;
    border-radius:6px;
    margin-top:6px;
}

/* FOTOS -------------------------------------------------- */

.fotos-grid {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.foto-thumb {
    width:100px;
    height:100px;
    object-fit:cover;
    border-radius:8px;
    border:1px solid #ccc;
}

/* ÍTEMS (Material, Agenda, Perjudicados) ---------------- */

.item {
    background:#F3F3F3;
    padding:8px 10px;
    border-radius:8px;
    margin-bottom:6px;
    font-size:13px;
    border-left:4px solid #D81B60;
}

/* VOLVER ------------------------------------------------- */

.btn-volver {
    padding:6px 10px;
    background:white;
    border-radius:6px;
    font-weight:600;
    border:none;
    margin-right:10px;
}

/* RESPONSIVE --------------------------------------------- */

@media (min-width:700px) {
    .main-container {
        max-width:900px;
        margin:auto;
    }
}