/* =========================
   TIPOGRAFÍA PRO
========================= */
body{
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;
}

/* =========================
   RESET
========================= */
*{box-sizing:border-box;margin:0;padding:0;}

/* =========================
   TIPOGRAFÍA PRO GLOBAL
========================= */

body{
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight:400;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

/* =========================
   LAYOUT
========================= */
main{
padding:20px;
max-width:1100px;
margin:auto;
}

h1{margin-bottom:15px;}

/* =========================
   HEADER
========================= */
.app-header{
background:#0d3c5f;
color:white;
padding:10px 15px;
display:flex;
align-items:center;
justify-content:space-between;
position:sticky;
top:0;
z-index:1000;
}

.logo{
display:flex;
align-items:center;
gap:10px;
font-weight:bold;
}

.logo img{
height:45px;
background:white;
padding:2px;
border-radius:8px;
}

/* MENU */
#menu{
display:flex;
gap:15px;
align-items:center;
}

#menu a{
color:white;
text-decoration:none;
padding:6px 10px;
border-radius:6px;
}

#menu a:hover{
background:rgba(255,255,255,0.2);
}

/* USER */
.menu-user{
display:flex;
align-items:center;
gap:10px;
margin-left:auto;
}

.logout{
background:#e74c3c;
padding:6px 10px;
border-radius:6px;
color:white;
}

/* BADGE */
.badge{
background:#e74c3c;
color:white;
font-size:10px;
padding:2px 6px;
border-radius:10px;
margin-left:5px;
}

.badge-warning{
background:#f39c12;
color:white;
}

.badge-critico{
background:#e74c3c;
color:white;
}

.badge-pulse{
animation:pulseBadge 1.5s infinite;
}

@keyframes pulseBadge{
0%{transform:scale(1);}
50%{transform:scale(1.2);}
100%{transform:scale(1);}
}

/* MENU TOGGLE FIX */
.menu-toggle{display:none;}

@media (max-width:768px){

.menu-toggle{display:block;}

#menu{
display:none;
flex-direction:column;
position:absolute;
top:60px;
left:0;
width:100%;
background:#0d3c5f;
padding:10px;
}

#menu.show{display:flex;}

}

/* =========================
   TABLAS
========================= */
.tabla{
width:100%;
border-collapse:collapse;
background:white;
border-radius:10px;
overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.tabla th{
background:#eef2f7;
padding:12px;
}

.tabla td{
padding:12px;
border-bottom:1px solid #eee;
}

.tabla tr:hover{background:#f8fafc;}

/* =========================
   BOTONES
========================= */
.btn{
background:#1f7a9c;
color:white;
padding:10px 16px;
border-radius:8px;
text-decoration:none;
display:inline-block;
}

.btn-secondary{
background:#6c757d;
color:white;
padding:10px 16px;
border-radius:8px;
text-decoration:none;
}

/* =========================
   ACCIONES
========================= */
.acciones{
display:flex;
gap:6px;
}

.btn-action{
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
color:white;
}

.pdf{background:#e74c3c;}
.ticket{background:#8e44ad;}
.email{background:#27ae60;}
.editar{background:#3498db;}
.eliminar{background:#2c3e50;}
.ver{background:#93CFAE;}

}

/* =========================
   FORMULARIOS
========================= */
input,select,textarea{
padding:10px;
border:1px solid #ccc;
border-radius:8px;
width:100%;
}

/* =========================
   ALERTAS (IMPORTANTE)
========================= */
.alerta{margin-left:6px;}

.alerta-roja{color:#e74c3c;}
.alerta-amarilla{color:#f39c12;}

/* =========================
   DASHBOARD
========================= */
.dashboard{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:15px;
margin:20px 0;
}

.card{
background:white;
padding:20px;
border-radius:12px;
text-align:center;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

/* =========================
   LOGIN
========================= */
.login-page{
height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(135deg,#0d3c5f,#1f7a9c);
}

.login-card{
width:320px;
background:rgba(255,255,255,0.1);
padding:30px;
border-radius:20px;
text-align:center;
}

.login-logo img{
width:120px;
background:white;
padding:10px;
border-radius:12px;
margin-bottom:15px;
}

.login-page h2{
color:white;
margin-bottom:20px;
}

.login-page .input-group{
display:flex;
align-items:center;
background:rgba(255,255,255,0.2);
border-radius:12px;
padding:10px;
margin-bottom:15px;
}

.login-page input{
background:none;
border:none;
color:white;
flex:1;
outline:none;
}

.toggle-pass{color:white;cursor:pointer;}

.remember-row{
display:flex;
align-items:center;
justify-content:center;
gap:10px;
color:white;
margin:10px 0;
}

.btn-login{
width:100%;
padding:12px;
border:none;
border-radius:25px;
background:#1f7a9c;
color:white;
}

/* =========================
   LOGS (BONITO Y AISLADO)
========================= */
.logs-page{padding:20px;}

.logs-container{
display:flex;
flex-direction:column;
gap:10px;
max-width:900px;
margin:auto;
}

.log-card{
display:flex;
justify-content:space-between;
align-items:center;
background:white;
padding:12px 15px;
border-radius:12px;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

.log-left{
display:flex;
flex-direction:column;
gap:4px;
}

.log-user{
font-weight:600;
color:#1f7a9c;
}

.log-accion{
font-size:13px;
background:#eef3f7;
padding:4px 8px;
border-radius:6px;
}

.log-right{
text-align:right;
font-size:12px;
}

/* =========================
   FOOTER PRO
========================= */

.footer{
background:#243f63;
color:#e6edf5;
padding:25px 30px;
font-size:14px;
font-weight:400;
}

.footer-container{
display:flex;
justify-content:space-between;
align-items:flex-start;
flex-wrap:wrap;
gap:20px;
}

.footer strong{
font-weight:500;
color:white;
}

.footer i{
margin-right:6px;
opacity:0.8;
}

.footer div{
line-height:1.6;
}

/* =========================
   FIX LINKS GLOBAL
========================= */
a{
text-decoration:none;
color:inherit;
}

a:hover{
text-decoration:none;
}

/* =========================
   DASHBOARD PRO
========================= */
.dashboard{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
gap:20px;
margin:20px 0;
}

.card{
background:white;
padding:25px;
border-radius:16px;
text-align:center;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
transition:0.2s;
}

.card.action{
display:block;
cursor:pointer;
color:#6c2eb9;
}

.card.action:hover{
transform:translateY(-4px);
box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

/* =========================
   BOTONES ACCIONES FIX
========================= */
.btn-action{
width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
color:white !important;
text-decoration:none !important;
}

.btn-action i{
pointer-events:none;
}

/* =========================
   PERFIL
========================= */
.perfil-container{
max-width:500px;
margin:auto;
background:white;
padding:25px;
border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.perfil-container h2{
margin-bottom:15px;
}

.perfil-container input{
margin-bottom:10px;
}

.logs-page .log-card{
background:white;
padding:12px 15px;
border-radius:12px;
box-shadow:0 2px 8px rgba(0,0,0,0.08);
}

/* =========================
   PERFIL PRO
========================= */

.perfil-page{
max-width:600px;
margin:30px auto;
}

.perfil-card{
background:white;
padding:25px;
border-radius:16px;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.perfil-header{
margin-bottom:20px;
}

.perfil-usuario{
font-size:22px;
font-weight:600;
}

.perfil-email{
color:#666;
font-size:14px;
}

.perfil-section{
margin-top:25px;
}

.perfil-section h3{
margin-bottom:10px;
font-size:18px;
}

/* INPUTS */
.perfil-group{
margin-bottom:15px;
}

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

.perfil-group input{
width:100%;
padding:12px;
border:1px solid #ddd;
border-radius:10px;
}

/* BOTONES */
.btn{
background:#1f7a9c;
color:white;
padding:10px 15px;
border-radius:8px;
border:none;
cursor:pointer;
}

.btn-danger{
background:#e74c3c;
}

/* ALERTA URGENTE */
.alerta-urgente{
color:#e74c3c;
font-weight:600;
animation:parpadeo 1s infinite;
}

@keyframes parpadeo{
0%{opacity:1;}
50%{opacity:0.4;}
100%{opacity:1;}
}

/* DASHBOARD ACTION CARDS */
.card.action{
display:block;
background:white;
border-radius:16px;
padding:25px;
text-align:center;
box-shadow:0 4px 12px rgba(0,0,0,0.08);
color:#6c2eb9 !important;
transition:0.2s;
}

.card.action i{
font-size:22px;
margin-bottom:10px;
display:block;
color:#6c2eb9;
}

.card.action:hover{
transform:translateY(-5px);
box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

/* KPIs */
.card h2{
font-size:26px;
margin:10px 0;
}

.card i{
font-size:22px;
color:#1f7a9c;
margin-bottom:5px;
}
.card p{
font-size:14px;
color:#1f7a9c;
margin-bottom:5px;
}


/* ACCIONES FIX */
.acciones a{
text-decoration:none !important;
}

.btn-action{
text-decoration:none !important;
color:white !important;
font-size:14px;
}

/* LINKS FIX DASHBOARD */
.card.action{
text-decoration:none;
}

.card.action:visited{
color:#6c2eb9;
}

/* =========================
   ALERTA CRÍTICA SUAVE PRO
========================= */

.alerta-critica{
width:100%;
padding:14px 20px;
border-radius:12px;
margin:15px 0 25px 0;

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

font-weight:500;
font-size:15px;

color:#7f1d1d;

background:#f8d7da;
border:1px solid #f1aeb5;

cursor:pointer;
transition:0.2s;

/* animación suave */
animation:alertaBreath 4s ease-in-out infinite;
}

/* animación tipo "respiración" */
@keyframes alertaBreath{
0%{
background:#f8d7da;
box-shadow:0 0 0 rgba(231,76,60,0);
}
50%{
background:#f1bfc4;
box-shadow:0 6px 18px rgba(231,76,60,0.25);
}
100%{
background:#e6a8af;
box-shadow:0 0 0 rgba(231,76,60,0);
}
}

/* hover elegante */
.alerta-critica:hover{
transform:translateY(-2px);
box-shadow:0 8px 20px rgba(231,76,60,0.3);
}

/* icono */
.alerta-critica i{
color:#e74c3c;
}
/* =========================
   FIX COLOR DASHBOARD
========================= */

/* estado normal */
.card.action{
color:#6c2eb9 !important; /* morado corporativo elegante */
text-decoration:none !important;
}

/* texto interno */
.card.action span,
.card.action div,
.card.action p{
color:#1f7a9c !important;
}

/* iconos */
.card.action i{
color:#1f7a9c !important;
}

/* visited (el problema real) */
.card.action:visited{
color:#1f7a9c !important;
}

/* hover */
.card.action:hover{
color:#155d74 !important;
}


/* =========================
   KPI CLICKABLE
========================= */

.card.kpi{
display:block;
text-decoration:none;
color:#333;
cursor:pointer;
transition:0.2s;
}

.card.kpi:hover{
transform:translateY(-4px);
box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

/* asegurar que no herede morado */
.card.kpi:visited{
color:#333;
}

.card.kpi i{
color:#1f7a9c;
}

.card.kpi h2{
font-weight:600;
}

/* =========================
   PERFIL PRO UI
========================= */

.perfil-card{
background:white;
padding:30px;
border-radius:16px;
box-shadow:0 6px 18px rgba(0,0,0,0.08);
}

/* HEADER */
.perfil-header{
display:flex;
align-items:center;
gap:15px;
margin-bottom:25px;
}

/* AVATAR MODERNO */
.avatar{
width:52px;
height:52px;
border-radius:50%;

background:linear-gradient(135deg,#1f7a9c,#155d74);

color:white;
font-weight:600;
font-size:20px;

display:flex;
align-items:center;
justify-content:center;

box-shadow:0 4px 10px rgba(0,0,0,0.15);
}

/* INFO */
.perfil-usuario{
font-size:20px;
font-weight:600;
}

.perfil-email{
font-size:14px;
color:#6b7280;
margin-top:2px;
}

/* SECCIONES */
.perfil-section{
margin-top:25px;
}

.perfil-section h3{
font-size:16px;
font-weight:600;
margin-bottom:12px;
}

/* INPUTS PRO */
.input-icon{
display:flex;
align-items:center;
gap:10px;
background:#f9fafb;
border:1px solid #e5e7eb;
border-radius:10px;
padding:10px 12px;
margin-bottom:12px;
}

.input-icon i{
color:#9ca3af;
font-size:14px;
}

.input-icon input{
border:none;
background:none;
outline:none;
width:100%;
font-size:14px;
}

/* PASSWORD ACTUAL (RESALTADO SUAVE) */
.input-icon input[value]{
background:#fef9c3;
border-radius:6px;
padding:6px;
}

/* BOTONES */
.btn{
background:#1f7a9c;
border:none;
padding:10px 16px;
border-radius:10px;
color:white;
font-weight:500;
cursor:pointer;
transition:0.2s;
}

.btn:hover{
background:#155d74;
}

.btn-danger{
background:#e74c3c;
}

.btn-danger:hover{
background:#c0392b;
}

/* ACCIÓN BLOQUEADA (USUARIO PROPIO) */
.accion-bloqueada{
display:flex;
align-items:center;
justify-content:center;
width:36px;
height:36px;
border-radius:8px;
background:#f1f5f9;
color:#cbd5e1;
font-size:14px;
}
.accion-bloqueada:hover{
background:#e2e8f0;
}

/* =========================
   ICONOS ALERTA (REVISIONES)
========================= */

.alerta-icon{
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
width:32px;
height:32px;
border-radius:8px;
background:#f8fafc;
}

/* ROJO (crítico) */
.alerta-icon.rojo{
color:#e74c3c;
}

/* AMARILLO (próximo) */
.alerta-icon.amarillo{
color:#f39c12;
}

/* =========================
   CHECKLIST PRO
========================= */

.checklist{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px 20px;
margin-top:10px;
}

.checklist label{
display:flex;
align-items:center;
gap:8px;
font-size:14px;
cursor:pointer;
}

.checklist input[type="checkbox"]{
width:16px;
height:16px;
cursor:pointer;
}

/* FORMULARIO PRO */
.form-card{
max-width:900px;
margin:auto;
}

.form-section{
margin-bottom:30px;
padding:20px;
background:#fff;
border-radius:12px;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
}

.form-section h3{
margin-bottom:15px;
font-weight:600;
}

/* CHECKLIST */
.checklist{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px 20px;
}

.checklist label{
display:flex;
align-items:center;
gap:8px;
font-size:14px;
cursor:pointer;
}

.checklist input{
width:16px;
height:16px;
}

/* CHECKLIST PRO */
.checklist-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px 20px;
}

.check-item{
display:flex;
align-items:center;
gap:8px;
}

.upload-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:15px;
}

.upload-box{
border:1px solid #ddd;
border-radius:10px;
padding:10px;
background:#fafafa;
text-align:center;
}

.preview{
width:100%;
max-height:120px;
object-fit:cover;
border-radius:8px;
display:none;
}

/* CHECKLIST PRO REAL */
.checklist-pro{
display:grid;
grid-template-columns:1fr;
gap:8px;
max-width:500px;
}

.check-pro-item{
display:flex;
align-items:center;
gap:10px;
padding:8px 12px;
border-radius:8px;
transition:0.2s;
cursor:pointer;
}

.check-pro-item:hover{
background:#f5f7fa;
}

.check-pro-item input{
width:16px;
height:16px;
flex-shrink:0;
}

.check-pro-item span{
font-size:14px;
}

/* CHECKLIST PRO */
.checklist-pro{
display:flex;
flex-direction:column;
gap:6px;
max-width:500px;
}

.check-pro-item{
display:flex;
align-items:center;
gap:10px;
padding:6px 8px;
border-radius:6px;
cursor:pointer;
}

.check-pro-item:hover{
background:#f5f7fa;
}

.check-pro-item input{
width:16px;
height:16px;
margin:0;
}

.check-pro-item span{
font-size:15px;
}
/* UPLOAD */
.upload-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
gap:15px;
}

.upload-box{
border:1px solid #ddd;
border-radius:10px;
padding:10px;
background:#fafafa;
text-align:center;
}

.preview{
width:100%;
max-height:120px;
object-fit:cover;
border-radius:8px;
display:none;
}

/* FIRMA */
.firma-box{
border:2px dashed #d0d7de;
border-radius:12px;
padding:15px;
background:#fafbfc;
max-width:600px;
}

.firma-canvas{
width:100%;
height:200px;
background:#fff;
border-radius:8px;
border:1px solid #ddd;
}

.firma-actions{
margin-top:10px;
text-align:right;
}

/* CHECK INLINE PRO */
.check-inline-pro{
display:flex;
align-items:center;
gap:10px;
font-size:14px;
cursor:pointer;
}

.check-inline-pro input{
width:16px;
height:16px;
margin:0;
}

.form-container{
max-width:700px;
margin:0 auto;
}

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

.form-group label{
display:block;
font-size:14px;
font-weight:500;
margin-bottom:6px;
color:#333;
}

.form-group input,
.form-group select,
.form-group textarea{
width:100%;
padding:10px 12px;
border-radius:8px;
border:1px solid #d0d7de;
font-size:14px;
background:#fff;
transition:0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
border-color:#2563eb;
outline:none;
box-shadow:0 0 0 2px rgba(37,99,235,0.1);
}

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

#campo_pedi{
transition:0.2s;
}


/* DROPZONE */
.drop-zone{
border:2px dashed #ccc;
padding:30px;
text-align:center;
border-radius:10px;
cursor:pointer;
transition:0.2s;
}

.drop-zone.drag{
background:#f0f8ff;
border-color:#3498db;
}

/* CARDS */
.cards{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
gap:15px;
}

.card-doc{
background:#fff;
border:1px solid #ddd;
border-radius:12px;
padding:15px;
display:flex;
gap:10px;
align-items:center;
}

.pdf-icon{
font-size:28px;
color:#e74c3c;
}

.doc-info{
flex:1;
}

.doc-actions a{
display:block;
font-size:12px;
margin-top:3px;
}




/* AUTOCOMPLETE */
.autocomplete-wrapper{
position:relative;
max-width:400px;
}

.autocomplete-box{
position:absolute;
width:100%;
background:#fff;
border:1px solid #ddd;
border-radius:8px;
margin-top:5px;
z-index:100;
}

.autocomplete-box .item{
padding:8px;
cursor:pointer;
}

.autocomplete-box .item:hover{
background:#f5f7fa;
}

/* DROPZONE */
.drop-zone{
border:2px dashed #ccc;
padding:30px;
text-align:center;
border-radius:12px;
cursor:pointer;
transition:0.2s;
}

.drop-zone.drag{
background:#eef6ff;
border-color:#3498db;
}


/* PAGINACIÓN PRO */
.pagination{
display:flex;
justify-content:center;
gap:6px;
margin:25px 0;
flex-wrap:wrap;
}

.pagination a,
.pagination span{
min-width:36px;
height:36px;
display:flex;
align-items:center;
justify-content:center;
border-radius:8px;
font-size:14px;
text-decoration:none;
background:#f1f3f5;
color:#555;
transition:all 0.2s ease;
}

/* hover */
.pagination a:hover{
background:#e2e6ea;
color:#111;
}

/* activa */
.pagination .active{
background:#2c7be5;
color:#fff;
font-weight:500;
}

/* anterior / siguiente */
.pagination .nav{
padding:0 10px;
font-weight:500;
}

/* opcional: sombra ligera */
.pagination a,
.pagination span{
box-shadow:0 1px 2px rgba(0,0,0,0.05);
}

.pagination{
display:flex;
justify-content:center;
align-items:center;
gap:10px; /* 👈 más aire */
margin:30px 0;
flex-wrap:wrap;
}

.pagination a,
.pagination span{
min-width:38px;
height:38px;
display:flex;
align-items:center;
justify-content:center;
border-radius:10px;
font-size:14px;
text-decoration:none;
background:#f1f3f5;
color:#555;
transition:all 0.2s ease;
}

/* hover */
.pagination a:hover{
background:#e2e6ea;
color:#111;
}

/* activa */
.pagination .active{
background:#2c7be5;
color:#fff;
font-weight:500;
box-shadow:0 2px 6px rgba(44,123,229,0.3);
}

/* navegación */
.pagination .nav{
padding:0 12px;
font-weight:600;
}

/* puntos */
.pagination .dots{
background:none;
color:#999;
min-width:auto;
}





/* CONTENEDOR TABLA */
.table-container{
margin-top:20px;
overflow-x:auto;
}

/* TABLA PRO */
.tabla-pro{
width:100%;
border-collapse:collapse;
background:#fff;
border-radius:12px;
overflow:hidden;
box-shadow:0 2px 10px rgba(0,0,0,0.05);
}

/* CABECERA */
.tabla-pro thead{
background:#f8f9fa;
}

.tabla-pro th{
text-align:left;
padding:12px 15px;
font-size:14px;
color:#555;
font-weight:600;
}

/* FILAS */
.tabla-pro td{
padding:12px 15px;
border-top:1px solid #eee;
font-size:14px;
}

/* HOVER */
.tabla-pro tbody tr:hover{
background:#f9fbfc;
}

/* ACCIONES */
.tabla-pro .acciones{
text-align:center;
width:120px;
}

/* BOTÓN DELETE */
.btn-delete{
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:8px;
background:#f8d7da;
color:#c0392b;
text-decoration:none;
transition:0.2s;
}

.btn-delete:hover{
background:#e74c3c;
color:#fff;
}


/* BOTÓN EDIT */
.btn-edit{
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:8px;
background:#e8f0fe;
color:#2c7be5;
text-decoration:none;
transition:0.2s;
margin-right:5px;
}

.btn-edit:hover{
background:#2c7be5;
color:#fff;
}

.img-modelo{
width:50px;
height:50px;
object-fit:contain;
border-radius:8px;
background:#fff;
padding:4px;
border:1px solid #eee;
}

.img-placeholder{
width:50px;
height:50px;
display:flex;
align-items:center;
justify-content:center;
background:#f1f3f5;
border-radius:8px;
font-size:20px;
}

.btn-edit{
display:inline-flex;
align-items:center;
justify-content:center;
width:34px;
height:34px;
border-radius:8px;
background:#e8f0fe;
color:#2c7be5;
text-decoration:none;
transition:0.2s;
margin-right:5px;
}

.btn-edit:hover{
background:#2c7be5;
color:#fff;
}


.img-modelo{
width:50px;
height:50px;
object-fit:contain;
border-radius:8px;
background:#fff;
padding:4px;
border:1px solid #eee;
}

.img-placeholder{
width:15px;
height:15px;
display:flex;
align-items:center;
justify-content:center;
background:#f1f3f5;
border-radius:8px;
font-size:20px;
}

/* ============
VIEW.php
============= */

.dea-header{
display:flex;
gap:20px;
align-items:flex-start;
}

.img-modelo-grande{
width:120px;
height:120px;
object-fit:contain;
background:#fff;
border:1px solid #eee;
border-radius:10px;
padding:10px;
}

.img-placeholder.grande{
width:120px;
height:120px;
display:flex;
align-items:center;
justify-content:center;
background:#f1f3f5;
border-radius:10px;
font-size:40px;
}

.lista-cad li{
margin-bottom:8px;
}

.dea-container{
    max-width:1100px;
    margin:30px auto;
}

.dea-card{
    background:#fff;
    border-radius:14px;
    padding:25px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

.dea-top{
    display:flex;
    gap:25px;
    align-items:center;
    margin-bottom:20px;
}

.dea-img img{
    width:140px;
    border-radius:12px;
    background:#f5f5f5;
    padding:10px;
}

.no-img{
    width:140px;
    height:140px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#eee;
    border-radius:12px;
    font-size:40px;
}

.dea-main h1{
    margin:0 0 10px;
    font-size:28px;
}

.dea-meta{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
    color:#555;
}

.dea-section{
    margin-top:25px;
}

.dea-section h2{
    margin-bottom:15px;
}
.dea-topbar{
display:flex;
gap:15px;
margin-bottom:20px;
flex-wrap:wrap;
}
.top-item{
background:#f8f9fb;
padding:10px 15px;
border-radius:10px;
}
.badge.grande{padding:6px 12px;font-size:13px;}


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

.cad-item{
    background:#f8f9fb;
    padding:15px;
    border-radius:10px;
}

.cad-item span{
    display:block;
    font-size:13px;
    color:#666;
}

.badge{
    display:inline-block;
    margin-top:8px;
    padding:4px 10px;
    border-radius:20px;
    font-size:12px;
    font-weight:bold;
}

.verde{background:#d4edda;color:#155724;}
.naranja{background:#fff3cd;color:#856404;}
.rojo{background:#f8d7da;color:#721c24;}
.gris{background:#e2e3e5;color:#555;}

.tabla-pro{
    width:100%;
    border-collapse:collapse;
}

.tabla-pro th{
    background:#f1f3f7;
    padding:12px;
    text-align:left;
}

.tabla-pro td{
    padding:12px;
    border-top:1px solid #eee;
}

.tabla-pro tr:hover{
    background:#fafafa;
}

.btn-mini{
    background:#2c7be5;
    color:#fff;
    padding:6px 12px;
    border-radius:6px;
    text-decoration:none;
    font-size:12px;
}

.dea-topbar{
display:flex;
justify-content:space-between;
gap:20px;
margin-bottom:20px;
flex-wrap:wrap;
}

.top-item{
background:#f8f9fb;
padding:12px 18px;
border-radius:10px;
min-width:150px;
}

.top-item span{
display:block;
font-size:12px;
color:#777;
margin-bottom:3px;
}

.top-item strong{
font-size:16px;
}

.badge.grande{
font-size:13px;
padding:6px 14px;
}

.chart-box{
max-width:100%;
height:260px;
margin-top:10px;
}

.chart-box canvas{
width:100% !important;
height:100% !important;
}



.check-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
margin-top:10px;
}

.check{
display:inline-block;
width:20px;
height:20px;
text-align:center;
border-radius:50%;
margin-right:6px;
}

.check.ok{
background:#2ecc71;
color:#fff;
}

.check.no{
background:#e74c3c;
color:#fff;
}

.obs-box{
background:#f8f9fb;
padding:15px;
border-radius:10px;
margin-top:10px;
}


/* ------------------------- */

.container-view{
max-width:1100px;
margin:auto;
}

.card{
background:#fff;
padding:20px;
border-radius:12px;
margin-bottom:20px;
box-shadow:0 2px 8px rgba(0,0,0,0.05);
}

.top{
display:flex;
justify-content:space-between;
align-items:center;
}

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

.checklist{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
}

.ok{
color:#2ecc71;
font-weight:bold;
margin-right:6px;
}

.no{
color:#e74c3c;
margin-right:6px;
}

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

.img-mini{
width:100%;
border-radius:8px;
cursor:pointer;
transition:0.2s;
}

.img-mini:hover{
transform:scale(1.05);
}

.firma{
text-align:center;
}

.firma-img{
max-height:120px;
border:1px solid #ddd;
padding:10px;
border-radius:10px;
}

.email-cell{
max-width:220px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
font-size:13px;
}