/* ═══════════════════════════════════════════════════════════════════
   Despapela Incidencias v1.0.0
   ═══════════════════════════════════════════════════════════════════ */

:root {
    --inc-primary: #005a73;
    --inc-green:   #08D600;
    --inc-red:     #e53e3e;
    --inc-warn:    #ed8936;
    --inc-purple:  #6b46c1;
    --inc-border:  #e2e8f0;
    --inc-muted:   #6b7a8d;
    --inc-bg:      #f7f9fc;
}

.inc-wrap { font-family:inherit; max-width:960px; margin:0 auto; }

/* Header */
.inc-header { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; margin-bottom:20px; padding-bottom:14px; border-bottom:2px solid var(--inc-border); }
.inc-avatar  { width:42px; height:42px; border-radius:12px; background:var(--inc-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.inc-username   { font-weight:700; color:#1a2332; font-size:15px; }
.inc-subtitle   { font-size:12px; color:var(--inc-muted); }
.inc-empresa-label { font-size:13px; font-weight:600; color:var(--inc-primary); }

/* Card */
.inc-card { background:#fff; border:1px solid var(--inc-border); border-radius:12px; padding:20px; margin-bottom:16px; }
.inc-card-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; }
.inc-card-titulo { font-size:15px; font-weight:700; color:var(--inc-primary); margin:0 0 14px; }
.inc-detalle { border:2px solid var(--inc-primary); }

/* Inputs */
.inc-field    { display:flex; flex-direction:column; gap:4px; margin-bottom:12px; }
.inc-label    { font-size:10px; font-weight:700; color:var(--inc-muted); text-transform:uppercase; letter-spacing:.05em; }
.inc-input    { border:1px solid var(--inc-border); border-radius:8px; padding:9px 12px; font-size:14px; color:#1a2332; width:100%; box-sizing:border-box; }
.inc-select   { border:1px solid var(--inc-border); border-radius:8px; padding:9px 12px; font-size:14px; color:#1a2332; background:#fff; width:100%; }
.inc-input:focus,.inc-select:focus { outline:none; border-color:var(--inc-primary); box-shadow:0 0 0 3px rgba(0,90,115,.12); }
textarea.inc-input { min-height:80px; resize:vertical; }

/* Grids */
.inc-grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.inc-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.inc-filtros-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; align-items:end; }
@media(max-width:540px){ .inc-grid-2,.inc-grid-3 { grid-template-columns:1fr; } }

/* Botones */
.inc-btn         { display:inline-flex; align-items:center; gap:5px; padding:9px 16px; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; transition:opacity .2s; }
.inc-btn:hover   { opacity:.85; }
.inc-btn--sm     { padding:6px 11px; font-size:12px; }
.inc-btn--full   { width:100%; justify-content:center; }
.inc-btn--primary{ background:var(--inc-primary); color:#fff; }
.inc-btn--gris   { background:#e2e8f0; color:#4a5568; }
.inc-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* Badges */
.inc-badge       { display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; }
.inc-badge--ok   { background:#c6f6d5; color:#276749; }
.inc-badge--warn { background:#feebc8; color:#7b341e; }
.inc-badge--info { background:#bee3f8; color:#2a4365; }
.inc-badge--off  { background:#e2e8f0; color:#718096; }

/* Stats strip */
.inc-stats-strip { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px; }
.inc-stat        { flex:1; min-width:80px; background:#fff; border:1px solid var(--inc-border); border-radius:10px; padding:10px 14px; text-align:center; }
.inc-stat-n      { display:block; font-size:22px; font-weight:800; color:#1a2332; }
.inc-stat-l      { display:block; font-size:10px; color:var(--inc-muted); font-weight:600; text-transform:uppercase; margin-top:2px; }
.inc-stat--warn  { border-top:3px solid var(--inc-warn); }
.inc-stat--ok    { border-top:3px solid var(--inc-green); }
.inc-stat--info  { border-top:3px solid #4299e1; }
.inc-stat--urg   { border-top:3px solid var(--inc-red); }
@keyframes inc-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(229,62,62,.3);} 50%{box-shadow:0 0 0 6px rgba(229,62,62,0);} }
.inc-stat--pulsing { animation:inc-pulse 1.5s infinite; }

/* Tabla */
.inc-tabla { width:100%; border-collapse:collapse; font-size:13px; }
.inc-tabla thead tr { background:var(--inc-primary); color:#fff; }
.inc-tabla thead th { padding:8px 10px; text-align:left; font-size:10px; font-weight:600; text-transform:uppercase; white-space:nowrap; }
.inc-tabla tbody tr { border-bottom:1px solid var(--inc-border); transition:background .15s; }
.inc-tabla tbody tr:hover { background:#f0f7fa; }
.inc-tabla td { padding:8px 10px; vertical-align:middle; }

/* Feedback */
.inc-feedback { padding:10px 16px; border-radius:8px; font-size:13px; font-weight:600; margin-bottom:12px; }
.inc-feedback.ok  { background:#c6f6d5; color:#276749; }
.inc-feedback.err { background:#fed7d7; color:#9b2c2c; }

/* Loading / empty */
.inc-loading { text-align:center; color:var(--inc-muted); font-size:13px; padding:24px; }
.inc-empty   { text-align:center; color:var(--inc-muted); font-size:13px; padding:32px; background:var(--inc-bg); border-radius:8px; }
.inc-empty-sm{ font-size:12px; color:var(--inc-muted); padding:12px; }

/* Meta grid */
.inc-meta-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px; margin-bottom:12px; }
.inc-meta-item { background:var(--inc-bg); padding:8px 12px; border-radius:8px; border:1px solid var(--inc-border); }
.inc-meta-label{ font-size:10px; color:var(--inc-muted); font-weight:700; text-transform:uppercase; margin-bottom:2px; }
.inc-meta-val  { font-size:13px; font-weight:500; color:#1a2332; }
.inc-det-desc  { background:var(--inc-bg); border-radius:8px; padding:12px; font-size:13px; line-height:1.6; border:1px solid var(--inc-border); }

/* Panel zonas */
.inc-grid-panel { display:grid; grid-template-columns:1fr 1.5fr; gap:16px; }
@media(max-width:620px){ .inc-grid-panel { grid-template-columns:1fr; } }
.inc-lista-ul   { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; }
.inc-lista-item { display:flex; justify-content:space-between; align-items:center; padding:10px 14px; border-radius:8px; border:1px solid var(--inc-border); cursor:pointer; transition:all .15s; font-size:13px; }
.inc-lista-item:hover { border-color:var(--inc-primary); background:#f0f7fa; }
.inc-lista-item.active { background:var(--inc-primary); color:#fff; border-color:var(--inc-primary); }
.inc-item-arrow { font-size:16px; opacity:.5; }

.inc-zonas-lista { display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.inc-zona-item   { display:flex; justify-content:space-between; align-items:flex-start; padding:10px 14px; background:var(--inc-bg); border-radius:8px; border:1px solid var(--inc-border); gap:10px; }
.inc-zona-nombre { font-size:13px; font-weight:600; color:#1a2332; }
.inc-zona-desc   { font-size:11px; color:var(--inc-muted); margin-top:2px; }
.inc-zona-acc    { display:flex; gap:4px; flex-shrink:0; }

.inc-form-inner { background:var(--inc-bg); border-radius:10px; padding:14px; margin-bottom:14px; border:1px solid var(--inc-border); }

/* Modal QR */
.inc-modal { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:9999; display:flex; align-items:center; justify-content:center; padding:16px; }
.inc-modal-inner { background:#fff; border-radius:16px; padding:24px; max-width:360px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,.3); }

/* ── Formulario público QR ──────────────────────────────────────── */
.inc-form-wrap    { max-width:480px; margin:0 auto; font-family:inherit; }
.inc-form-error   { background:#fed7d7; color:#9b2c2c; padding:16px; border-radius:10px; font-size:14px; }
.inc-form-success { text-align:center; padding:32px; background:#f0fff4; border-radius:12px; }
.inc-form-success h3 { color:#276749; font-size:18px; margin:0 0 8px; }
.inc-form-success p  { color:#4a5568; font-size:14px; margin:0; }

.inc-form-header  { display:flex; align-items:flex-start; gap:14px; background:var(--inc-primary); color:#fff; padding:18px 20px; border-radius:12px; margin-bottom:20px; }
.inc-form-logo    { font-size:28px; flex-shrink:0; }
.inc-form-empresa { font-size:16px; font-weight:700; }
.inc-form-cliente { font-size:13px; opacity:.85; margin-top:2px; }
.inc-form-zona    { font-size:12px; opacity:.7; margin-top:4px; }
.inc-form-titulo  { font-size:18px; font-weight:700; color:#1a2332; margin:0 0 20px; }

/* Tipos radio cards */
.inc-tipo-grid  { display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }
@media(max-width:400px){ .inc-tipo-grid { grid-template-columns:1fr; } }
.inc-tipo-card  { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:12px 8px; border:2px solid var(--inc-border); border-radius:10px; cursor:pointer; text-align:center; transition:all .2s; }
.inc-tipo-card input { display:none; }
.inc-tipo-card:hover { border-color:var(--inc-primary); background:#f0f7fa; }
.inc-tipo-card.active { border-color:var(--inc-primary); background:var(--inc-primary); color:#fff; }
.inc-tipo-icono { font-size:22px; }
.inc-tipo-label { font-size:11px; font-weight:600; }

/* Foto area */
.inc-foto-area { border:2px dashed var(--inc-border); border-radius:10px; padding:20px; text-align:center; transition:border-color .2s; }
.inc-foto-area:hover { border-color:var(--inc-primary); }