/* ================================================================
   INCIDENCIAS - CONCEPTO 3 / A1
   Mobile-first progressive enhancement
   ================================================================ */

:root{
  --c3-blue:#0751a6;
  --c3-blue-dark:#07376f;
  --c3-green:#2e9b37;
  --c3-bg:#f2f7fc;
  --c3-border:#d8e5f2;
  --c3-muted:#66758a;
}

.c3-filter-toggle,
.c3-report-bar,
.c3-wizard,
.c3-location-action,
.c3-coords-details{
  display:none;
}

@media(max-width:760px){

  body{
    background:
      linear-gradient(
        180deg,
        #edf5fc 0,
        #f7fafd 45%,
        #f2f7fb 100%
      );
    padding-bottom:86px;
  }

  main{
    padding:
      16px
      14px
      22px;
  }

  .hero-panel{
    padding:20px;
    margin-bottom:14px;
    border-radius:24px;
    gap:14px;
  }

  .hero-panel h1{
    font-size:27px;
    letter-spacing:-.02em;
  }

  .hero-panel p{
    font-size:15px;
    line-height:1.42;
    margin-top:7px;
  }

  .hero-actions{
    width:100%;
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
  }

  .hero-actions .btn{
    width:100%;
  }

  .hero-actions .btn.outline{
    order:2;
    color:#fff;
    border-color:rgba(255,255,255,.72);
    background:rgba(255,255,255,.12);
  }

  .hero-actions .btn.outline:hover,
  .hero-actions .btn.outline:focus{
    color:#fff;
    background:rgba(255,255,255,.18);
  }

  #btnNuevaIncidencia{
    order:1;
    min-height:50px;
    font-size:15px;
  }

  /* Resumen antes del listado */
  .layout{
    display:flex !important;
    flex-direction:column;
    gap:14px;
  }

  .layout > aside{
    order:-1;
  }

  .layout > aside .side-card:first-child{
    margin:0;
    padding:14px;
    border-radius:20px;
  }

  .layout > aside .side-card:first-child h3{
    margin-bottom:10px;
    font-size:16px;
  }

  .layout > aside .side-card:nth-child(n+2){
    display:none;
  }

  #resumenBox{
    display:grid;
    grid-template-columns:
      repeat(2,minmax(0,1fr));
    gap:8px;
  }

  #resumenBox .mini-item{
    min-width:0;
    padding:10px 7px;
    text-align:center;
    border-radius:14px;
    background:#f7faff;
  }

  #resumenBox .mini-item b{
    font-size:17px;
  }

  #resumenBox .mini-item small{
    font-size:10px;
    line-height:1.2;
  }

  /* filtros plegables */
  .c3-filter-toggle{
    display:flex;
    width:100%;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    border:1px solid var(--c3-border);
    border-radius:16px;
    background:#fff;
    padding:13px 15px;
    margin-bottom:10px;
    color:var(--c3-blue-dark);
    font-weight:900;
    font-size:14px;
    box-shadow:0 7px 20px rgba(11,43,91,.06);
  }

  .toolbar{
    display:none;
    padding:14px;
    margin-bottom:14px;
    border-radius:18px;
  }

  .toolbar.c3-open{
    display:grid;
  }

  .toolbar .field{
    margin:0;
  }

  .toolbar input,
  .toolbar select{
    min-height:48px;
    font-size:16px;
  }

  /* pestañas */
  .segmented{
    position:sticky;
    top:72px;
    z-index:25;
    background:rgba(244,248,252,.94);
    backdrop-filter:blur(10px);
    padding:5px;
    border-radius:16px;
    margin-bottom:12px;
  }

  .segment{
    min-height:44px;
    font-size:13px;
  }

  /* tarjetas compactas */
  .cards-grid{
    gap:12px;
  }

  .inc-card{
    border-radius:20px;
    box-shadow:
      0 8px 22px rgba(11,43,91,.08);
  }

  .inc-body{
    padding:14px;
    gap:9px;
  }

  .inc-title{
    font-size:18px;
  }

  .inc-desc{
    min-height:0;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .inc-meta{
    gap:6px;
    font-size:12px;
  }

  .inc-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .inc-actions .btn{
    width:100%;
    min-height:44px;
  }

  /* CTA sticky inferior */
  .c3-report-bar{
    display:flex;
    position:fixed;
    left:12px;
    right:12px;
    bottom:10px;
    z-index:85;
    padding:9px;
    border:1px solid rgba(207,225,247,.95);
    border-radius:21px;
    background:rgba(255,255,255,.94);
    backdrop-filter:blur(14px);
    box-shadow:0 14px 36px rgba(7,55,111,.20);
  }

  .c3-report-bar button{
    width:100%;
    min-height:53px;
    border:0;
    border-radius:15px;
    background:
      linear-gradient(
        135deg,
        #0b6edb,
        #0751a6
      );
    color:#fff;
    font-size:16px;
    font-weight:900;
  }

  body.menu-open .c3-report-bar{
    display:none;
  }

  /* modal -> bottom sheet */
  .modal-overlay{
    align-items:flex-end;
    justify-content:center;
    padding:0;
  }

  .modal,
  .modal.wide{
    width:100%;
    max-width:none;
    max-height:92dvh;
    border-radius:
      30px
      30px
      0
      0;
    overflow:auto;
  }

  .modal-head{
    position:sticky;
    top:0;
    z-index:30;
    padding:
      34px
      42px
      15px;
    background:#fff;
    color:var(--c3-blue-dark);
    border-bottom:1px solid #edf2f7;
  }

  .modal-head::before{
    content:"";
    position:absolute;
    top:12px;
    left:50%;
    width:88px;
    height:6px;
    transform:translateX(-50%);
    border-radius:999px;
    background:#9aabc0;
  }

  .modal-head h2{
    color:var(--c3-blue-dark);
    font-size:27px;
  }

  .modal-head p{
    color:var(--c3-muted);
    font-size:14px;
    line-height:1.35;
    padding-right:38px;
  }

  .modal-close{
    position:absolute;
    top:30px;
    right:20px;
    width:46px;
    height:46px;
    background:#f0f5fb;
    color:#526d88;
  }

  .modal-body{
    padding:
      16px
      18px
      calc(22px + env(safe-area-inset-bottom));
  }

  /* wizard */
  #modalIncidenciaForm .modal-actions{
    display:flex !important;
  }

  .c3-wizard{
    display:block;
    margin-bottom:15px;
  }

  .c3-steps{
    display:grid;
    grid-template-columns:
      repeat(4,minmax(0,1fr));
    align-items:start;
    gap:4px;
  }

  .c3-step{
    position:relative;
    text-align:center;
    color:#94a3b8;
    font-size:10px;
    font-weight:800;
  }

  .c3-step:not(:last-child)::after{
    content:"";
    position:absolute;
    top:19px;
    left:68%;
    right:-32%;
    height:3px;
    background:#dce6ef;
  }

  .c3-step-num{
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    margin:0 auto 6px;
    border-radius:50%;
    background:#edf2f7;
    color:#66758a;
    font-size:17px;
    font-weight:900;
    position:relative;
    z-index:2;
  }

  .c3-step.active{
    color:var(--c3-blue);
  }

  .c3-step.active .c3-step-num{
    background:var(--c3-blue);
    color:#fff;
  }

  .c3-step.done{
    color:#64748b;
  }

  .c3-step.done .c3-step-num{
    background:var(--c3-green);
    color:#fff;
  }

  .c3-step.done::after{
    background:#9edaa6;
  }

  .c3-step-panel[hidden]{
    display:none !important;
  }

  #formIncidencia .form-group{
    margin-bottom:15px;
  }

  #formIncidencia .form-group label{
    font-size:13px;
  }

  #formIncidencia input,
  #formIncidencia select,
  #formIncidencia textarea{
    min-height:52px;
    border-radius:14px;
    font-size:16px;
  }

  #formIncidencia textarea{
    min-height:130px;
  }

  .c3-step-title{
    margin:
      2px
      0
      13px;
  }

  .c3-step-title h3{
    margin:0;
    color:var(--c3-blue-dark);
    font-size:20px;
  }

  .c3-step-title p{
    margin:5px 0 0;
    color:var(--c3-muted);
    font-size:13px;
    line-height:1.4;
  }

  .c3-location-action{
    display:flex;
    margin-bottom:14px;
  }

  .c3-location-action button{
    width:100%;
    min-height:48px;
    border:1px solid #bdd7f4;
    border-radius:14px;
    background:#edf6ff;
    color:var(--c3-blue);
    font-weight:900;
    font-size:14px;
  }

  .c3-coords-details{
    display:block;
    margin-bottom:14px;
    border:1px solid #dce6ef;
    border-radius:15px;
    background:#fbfdff;
  }

  .c3-coords-details summary{
    cursor:pointer;
    padding:13px 15px;
    color:#526d88;
    font-weight:800;
    font-size:13px;
  }

  .c3-coords-body{
    padding:
      0
      14px
      4px;
  }

  .c3-confirm-box{
    display:grid;
    gap:9px;
    margin-bottom:14px;
  }

  .c3-confirm-card{
    border:1px solid #dce6ef;
    border-radius:15px;
    padding:12px 14px;
    background:#f8fbff;
  }

  .c3-confirm-card small{
    display:block;
    color:#718096;
    font-size:10px;
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:4px;
  }

  .c3-confirm-card strong{
    display:block;
    color:#183b63;
    line-height:1.35;
    word-break:break-word;
  }

  .c3-wizard-nav{
    position:sticky;
    bottom:0;
    z-index:22;
    display:grid;
    grid-template-columns:
      minmax(0,.8fr)
      minmax(0,1.35fr);
    gap:9px;
    padding:
      12px
      0
      max(2px,env(safe-area-inset-bottom));
    margin-top:10px;
    background:
      linear-gradient(
        180deg,
        rgba(255,255,255,0),
        #fff 18%,
        #fff 100%
      );
  }

  .c3-wizard-nav button{
    min-height:52px;
    border-radius:15px;
    font-size:15px;
    font-weight:900;
  }

  .c3-wizard-prev{
    border:1px solid #bdd7f4;
    background:#f5f9fe;
    color:var(--c3-blue);
  }

  .c3-wizard-next{
    border:0;
    background:var(--c3-blue);
    color:#fff;
  }

  .c3-wizard-next.is-submit{
    background:var(--c3-green);
  }

  .c3-wizard-nav.single{
    grid-template-columns:1fr;
  }

  /* detalle */
  #modalDetalle .detail-layout{
    display:block;
  }

  #modalDetalle .panel{
    margin-bottom:12px;
    border-radius:17px;
    box-shadow:none;
  }

  /* mensajes como toast */
  #mensajeIncidencias.status.show{
    position:fixed;
    top:76px;
    left:12px;
    right:12px;
    z-index:220;
    margin:0;
    box-shadow:0 15px 35px rgba(11,43,91,.18);
  }
}

/* ================================================================
   INC-UX-C3-A1-R3
   El atributo hidden del wizard siempre prevalece.
   ================================================================ */

#formIncidencia [data-c3-step][hidden]{
  display:none !important;
}


/* ================================================================
   INC-UX-C3-A2
   Detalle de incidencia mobile-first
   ================================================================ */

#modalDetalle #detalleTitulo{
  overflow-wrap:normal;
  word-break:normal;
}

#modalDetalle #detalleSubtitulo{
  max-width:calc(100% - 60px);
  overflow-wrap:anywhere;
  word-break:break-word;
  font-family:
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Consolas,
    monospace;
  font-size:12px;
  letter-spacing:.01em;
}

#modalDetalle .modal-body{
  background:#f3f7fb;
}

.c3-detail{
  display:grid;
  gap:14px;
}

.c3-detail-hero,
.c3-detail-section,
.c3-detail-privacy{
  border:1px solid #dbe7f2;
  border-radius:20px;
  background:#fff;
  box-shadow:
    0 7px 20px
    rgba(11,43,91,.05);
}

.c3-detail-hero{
  padding:18px;
}

.c3-detail-badges{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  margin-bottom:13px;
}

.c3-detail-title{
  margin:0;
  color:#07376f;
  font-size:23px;
  line-height:1.16;
  letter-spacing:-.02em;
}

.c3-detail-description{
  margin:10px 0 0;
  color:#53667b;
  font-size:15px;
  line-height:1.5;
}

.c3-detail-classification{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:15px;
}

.c3-detail-classification span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 10px;
  border:1px solid #d6e5f5;
  border-radius:999px;
  background:#f2f7fd;
  color:#365a7e;
  font-size:12px;
  font-weight:800;
}

.c3-detail-metrics{
  display:grid;
  grid-template-columns:
    repeat(2,minmax(0,1fr));
  gap:8px;
}

.c3-detail-metric{
  min-width:0;
  padding:13px 11px;
  border:1px solid #dfe8f1;
  border-radius:17px;
  background:#fff;
  text-align:center;
}

.c3-detail-metric small{
  display:block;
  margin-bottom:4px;
  color:#7b8ba0;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}

.c3-detail-metric strong{
  display:block;
  color:#07376f;
  font-size:15px;
  overflow-wrap:anywhere;
}

.c3-detail-section{
  padding:17px;
}

.c3-detail-section-head{
  display:flex;
  align-items:flex-start;
  gap:11px;
  margin-bottom:14px;
}

.c3-detail-section-icon{
  flex:0 0 42px;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#edf6ff;
  color:#0751a6;
  font-size:20px;
  font-weight:900;
}

.c3-detail-section-head h3{
  margin:0;
  color:#07376f;
  font-size:18px;
  line-height:1.2;
}

.c3-detail-section-head p{
  margin:4px 0 0;
  color:#748398;
  font-size:12px;
  line-height:1.35;
}

.c3-detail-dates{
  display:grid;
  gap:9px;
}

.c3-detail-dates > div{
  padding:11px 12px;
  border-radius:13px;
  background:#f8fbfe;
}

.c3-detail-dates small{
  display:block;
  margin-bottom:3px;
  color:#7b8ba0;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
}

.c3-detail-dates strong{
  display:block;
  color:#344e68;
  font-size:13px;
  line-height:1.35;
}

.c3-detail-location{
  display:grid;
  gap:6px;
  padding:14px;
  border-radius:15px;
}

.c3-detail-location.is-public{
  border:1px solid #bee6ca;
  background:#f1fbf4;
}

.c3-detail-location.is-private{
  border:1px solid #d7e5f3;
  background:#f4f8fc;
}

.c3-detail-location strong{
  color:#07376f;
  font-size:15px;
}

.c3-detail-location span{
  color:#53667b;
  line-height:1.45;
}

.c3-detail-location small{
  color:#718096;
  line-height:1.35;
}

.c3-detail-map-link{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:7px 12px;
  margin-top:4px;
  border-radius:11px;
  background:#0751a6;
  color:#fff;
  font-size:13px;
  font-weight:900;
  text-decoration:none;
}

.c3-detail-comment-input{
  width:100%;
  min-height:120px;
  resize:vertical;
  padding:13px 14px;
  border:1px solid #cad9e8;
  border-radius:14px;
  background:#fff;
  color:#1f2937;
  font:inherit;
  font-size:16px;
}

.c3-detail-comment-input:focus{
  outline:2px solid rgba(11,110,219,.18);
  border-color:#0b6edb;
}

.c3-detail-action-grid{
  display:grid;
  grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);
  gap:9px;
  margin-top:11px;
}

.c3-detail-primary,
.c3-detail-secondary,
.c3-detail-upload{
  min-height:48px;
  border-radius:14px;
  font:inherit;
  font-size:13px;
  font-weight:900;
}

.c3-detail-primary,
.c3-detail-upload{
  border:0;
  background:#2e9b37;
  color:#fff;
}

.c3-detail-secondary{
  border:1px solid #cfe0f2;
  background:#edf5ff;
  color:#0751a6;
}

.c3-detail-secondary:disabled{
  opacity:.58;
}

.c3-detail-list{
  display:grid;
  gap:9px;
}

.c3-detail-empty{
  padding:13px 14px;
  border-radius:13px;
  background:#f7fafc;
  color:#718096;
  font-size:13px;
  line-height:1.4;
}

.c3-detail-comment{
  padding:13px;
  border:1px solid #dfe8f1;
  border-radius:14px;
  background:#fbfdff;
}

.c3-detail-comment-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}

.c3-detail-comment-head strong{
  color:#07376f;
  font-size:13px;
}

.c3-detail-comment-head small{
  color:#8a98a9;
  font-size:10px;
  text-align:right;
}

.c3-detail-comment p{
  margin:8px 0 0;
  color:#43576d;
  font-size:14px;
  line-height:1.45;
}

.c3-detail-attachment{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 13px;
  border:1px solid #dfe8f1;
  border-radius:14px;
  background:#fbfdff;
}

.c3-detail-attachment > div{
  min-width:0;
}

.c3-detail-attachment strong,
.c3-detail-attachment small{
  display:block;
  overflow-wrap:anywhere;
}

.c3-detail-attachment strong{
  color:#07376f;
  font-size:13px;
}

.c3-detail-attachment small{
  margin-top:3px;
  color:#7c8b9e;
  font-size:10px;
}

.c3-detail-attachment a{
  flex:0 0 auto;
  color:#0751a6;
  font-size:12px;
  font-weight:900;
  text-decoration:none;
}

.c3-file-picker{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:10px;
  padding:10px;
  border:1px solid #d7e3ef;
  border-radius:14px;
  background:#f9fbfd;
}

.c3-file-input{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.c3-file-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:8px 12px;
  border-radius:11px;
  background:#edf5ff;
  color:#0751a6;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.c3-file-name{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#66758a;
  font-size:12px;
}

.c3-detail-upload{
  width:100%;
  margin-top:10px;
}

.c3-detail-privacy{
  padding:0;
  overflow:hidden;
}

.c3-detail-privacy summary{
  cursor:pointer;
  padding:15px 17px;
  color:#526d88;
  font-size:13px;
  font-weight:900;
}

.c3-detail-privacy p{
  margin:0;
  padding:
    0
    17px
    17px;
  color:#718096;
  font-size:12px;
  line-height:1.5;
}

@media(max-width:760px){

  #modalDetalle .modal-head h2{
    font-size:23px;
  }

  #modalDetalle .modal-body{
    padding:
      14px
      14px
      calc(22px + env(safe-area-inset-bottom));
  }

}

@media(max-width:390px){

  .c3-detail-action-grid{
    grid-template-columns:1fr;
  }

  .c3-file-picker{
    grid-template-columns:1fr;
  }

  .c3-file-button{
    width:100%;
  }

  .c3-file-name{
    text-align:center;
  }

}

/* ================================================================
   INC-UX-C3-A2-R1
   Refinamiento del header del detalle
   ================================================================ */

@media(max-width:760px){

  #modalDetalle .modal-head{
    position:relative;
    top:auto;
    padding:
      32px
      74px
      15px
      38px;
  }

  #modalDetalle #detalleTitulo{
    font-size:22px;
    line-height:1.15;
  }

  #modalDetalle #detalleSubtitulo{
    display:block;
    width:auto;
    max-width:none;
    padding-right:0;
    margin-top:7px;

    white-space:nowrap;
    overflow:visible;
    text-overflow:clip;

    font-size:11px;
    line-height:1.2;
    letter-spacing:0;
  }

  #modalDetalle .modal-close{
    top:28px;
    right:18px;
  }

}

/* ================================================================
   INCIDENCIAS-UX-WIZNAV-C1
   Una sola barra de acciones para el wizard.
   ================================================================ */

#modalIncidenciaForm .modal-actions .btn[hidden]{
  display:none !important;
}