/* ==========================================================================
   FSE SKIN v3 — CFR-TED pixel-accurate clone of fse.regione.sicilia.it/avvisoPOC
   Patch v6: allineamento 1:1 al portale ufficiale basato su audit DOM
             (Chrome-Claude parallel run 2026-04-21, 98 diff documentate).
   Font base Open Sans 13px. Metronic override.
   ========================================================================== */

:root{
  --fse-body-bg:            rgb(245,245,245);
  --fse-body-fg:            rgb(0,0,0);                 /* v6: era #333, ufficiale = #000 */
  --fse-base-font:          "Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --fse-base-size:          13px;

  --fse-blue-primary:       rgb(77,144,254);
  --fse-blue-header:        rgb(75,141,248);            /* portlet-title default */
  --fse-green:              rgb(53,170,71);
  --fse-red:                rgb(216,74,56);
  --fse-red-title:          rgb(224,34,34);             /* v6: portlet-title "red" pixel E02222 */
  --fse-yellow:             rgb(255,184,72);
  --fse-orange:             rgb(240,173,78);
  --fse-danger:             rgb(217,83,79);
  --fse-purple:             rgb(133,43,153);
  --fse-gray-disabled:      rgb(229,229,229);
  --fse-gray-text:          rgb(51,51,51);
  --fse-input-bg:           rgb(238,238,238);           /* v6: era #DDD, ufficiale = #EEE */
  --fse-input-bg-disabled:  rgb(221,221,221);
  --fse-input-border:       rgb(139,139,139);
  --fse-input-border-w:     1.33px;                     /* v6: ufficiale usa 1.33px */
  --fse-input-red-border:   rgb(165,42,42);
  --fse-table-row-odd:      rgb(249,249,249);
  --fse-alert-warn-bg:      rgb(252,248,227);
  --fse-alert-warn-border:  rgb(250,235,204);
  --fse-info-box-bg:        rgb(217,237,247);
  --fse-info-box-border:    rgb(188,214,228);
}

html,body{
  background: var(--fse-body-bg) !important;
  color: var(--fse-body-fg) !important;
  font-family: var(--fse-base-font) !important;
  font-size: var(--fse-base-size) !important;
  line-height: 1.42857143 !important;
  margin:0; padding:0;
}
.page-container, .page-content, .page-content-wrapper,
.wrapper, .content { background: var(--fse-body-bg) !important; }
a { color: var(--fse-blue-primary); text-decoration: none; }
a:hover { color: #2a6fd6; text-decoration: underline; }

/* --- Banner sottile "PIATTAFORMA DI ESERCITAZIONE" in cima -------------- */
.fse-exercise-banner{
  background: var(--fse-danger); color:#fff;
  text-align:center; font-weight:700; font-size:12px; letter-spacing:.5px;
  padding:6px 10px; border-bottom:1px solid rgba(0,0,0,.1);
}

/* --- Header istituzionale (stemma + titoli + utente) -------------------- */
.fse-header{
  background:#fff; border-bottom:1px solid #e5e5e5; padding:10px 20px;
}
.fse-header .container-fluid{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; gap:15px; min-height:90px;
}
.fse-header .fse-stemma{ height:80px; width:auto; flex:0 0 auto; }
.fse-header .fse-titoli{ flex:1 1 auto; line-height:1.25; }
.fse-header .fse-titoli .t1{ font-size:11px; color:#888; letter-spacing:.3px; margin:0; }
.fse-header .fse-titoli .t2{ font-size:18px; color:#222; font-weight:700; margin:2px 0 0; }
.fse-header .fse-titoli .t3{ font-size:12px; color:#666; margin:0; }
.fse-header .fse-user-box{ text-align:right; font-size:12px; color:#555; flex:0 0 auto; }
.fse-header .fse-user-box .user{ font-weight:600; color:#222; }
.fse-header .fse-user-box a.logout{
  display:inline-block; margin-left:10px; color:#fff;
  background: var(--fse-danger); padding:4px 10px; border-radius:3px;
  font-weight:600; text-decoration:none;
}
.fse-header .fse-user-box a.logout:hover{ background:#c23829; }

/* --- Nav strip (Cambia soggetto / Breadcrumb) --------------------------- */
.fse-navstrip{
  background:#fafafa; border-bottom:1px solid #e5e5e5;
  padding:8px 20px;
}
.fse-navstrip .container-fluid{
  max-width:1200px; margin:0 auto;
  display:flex; align-items:center; gap:10px;
}
.fse-navstrip .btn-nav{
  font-size:13px; padding:5px 12px; border-radius:3px;
  text-decoration:none; color:#fff; font-weight:600;
}
.fse-navstrip .btn-nav.green{ background: var(--fse-green); }
.fse-navstrip .btn-nav.green:hover{ background:#2f9a60; }
.fse-navstrip .btn-nav.blue{ background: var(--fse-blue-primary); }
.fse-navstrip .fse-breadcrumb{ margin-left:auto; font-size:12px; color:#666; }
.fse-navstrip .fse-breadcrumb a{ color:#666; }
.fse-navstrip .fse-breadcrumb a:hover{ color: var(--fse-blue-primary); }
.fse-navstrip .fse-breadcrumb .sep{ margin:0 6px; color:#aaa; }

/* --- Container principale ----------------------------------------------- */
.fse-wrap{ max-width:1200px; margin:0 auto; padding:20px; }
.fse-page-title{ font-size:20px; margin:0 0 4px; color:#333; font-weight:600; }

/* --- Tab P.E. (Elenco | Dettaglio | Partecipanti | ...) -----------------
   v6 FIX: nel portale ufficiale ogni tab ha un colore PERMANENTE (blu,
   giallo, rosso). L'attivazione si vede solo tramite ombra interna in
   basso, non cambiando da grigio a colorato. */
.fse-tabs-pe{
  display:flex; flex-wrap:wrap; gap:4px;
  padding:10px 0; margin:0 0 18px;
  border-bottom:1px solid #ddd;
}
.fse-tabs-pe a.tab, .fse-tabs-pe .tab{
  display:inline-block; padding:7px 14px; font-size:14px;
  color:#fff; text-decoration:none; font-weight:600;
  border-radius:0; border:1px solid transparent; cursor:pointer;
}
/* v6: rimossa la classe "gray" dal rendering — ora le tab non active
       mantengono il colore semantico. Chi la usa continua a funzionare. */
.fse-tabs-pe .tab.gray{ background: var(--fse-gray-disabled); color: var(--fse-gray-text); }
.fse-tabs-pe .tab.blue{ background: var(--fse-blue-primary); }
.fse-tabs-pe .tab.yellow{ background: var(--fse-yellow); color:#fff; }
.fse-tabs-pe .tab.red{ background: var(--fse-red); }
.fse-tabs-pe .tab:hover{ filter:brightness(.93); text-decoration:none; color:#fff; }
.fse-tabs-pe .tab.active{
  box-shadow: 0 3px 0 0 rgba(0,0,0,.18) inset;
}
.fse-tabs-pe .tab.gray.active{ box-shadow: 0 3px 0 0 rgba(0,0,0,.12) inset; }

/* Override Bootstrap .nav-tabs per pagine che ancora le usano */
.nav-tabs{ border-bottom:1px solid #ddd; padding-left:0; list-style:none; display:flex; flex-wrap:wrap; gap:4px; }
.nav-tabs > li{ margin-bottom:0; }
.nav-tabs > li > a{
  padding:7px 14px; font-size:14px; color:#fff; font-weight:600;
  border-radius:0; background: var(--fse-blue-primary);
}
.nav-tabs > li.active > a{ box-shadow: 0 3px 0 0 rgba(0,0,0,.18) inset; }

/* --- Portlet / card sezione --------------------------------------------- */
/* v6: portlet-body bianco esplicito (ufficiale = #FFF), padding 10px,
       portlet-title blu di default (#4B8DF8), rosso (#E02222) per
       sezioni sensibili (Personale, Stage) tramite classi .red / .blue. */
.portlet, .fse-card{
  background:#fff; border:1px solid #e5e5e5;
  margin-bottom:20px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.portlet-title, .fse-card-head{
  padding:8px 10px 2px; min-height:34px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:14px; font-weight:700;
  background: var(--fse-blue-header); color:#fff;  /* v6: default ora BLU (#4B8DF8) */
}
.portlet.blue > .portlet-title,      .fse-card.blue > .fse-card-head      { background: var(--fse-blue-header); color:#fff; }
.portlet.green > .portlet-title,     .fse-card.green > .fse-card-head     { background: var(--fse-green);       color:#fff; }
.portlet.red > .portlet-title,       .fse-card.red > .fse-card-head       { background: var(--fse-red-title);   color:#fff; }
.portlet.yellow > .portlet-title,    .fse-card.yellow > .fse-card-head    { background: var(--fse-yellow);      color:#fff; }
.portlet-body, .fse-card-body{
  padding:10px;                                    /* v6: era 15px, ufficiale = 10px */
  background:#fff;                                 /* v6: esplicito, era transparent */
}

/* --- Tabelle -----------------------------------------------------------
   v6 FIX: thead font 14px weight 600 (era 12/700); tbody padding 5px.
   v13-struct-CSS-B: allineamento GRIGLIA all'ufficiale (Giro B Chrome-Claude)
     - border-collapse: collapse (già ok)
     - TD: bordo 1.33px #ddd su TUTTI i 4 lati (era solo bottom)
     - TH: bordi L/R 1.33px #ddd, nessun bordo top/bottom (era bottom 2px)
     - wrapper table: bordo esterno 1.33px #ddd
     - zebra: tbody tr:nth-child(odd) td -> #f9f9f9 (già ok, var)
     - riga firmata: colori Bootstrap "success" inline-style dell'ufficiale */
.table, .table-fse{
  width:100%; margin-bottom:20px; background:transparent; border-collapse:collapse;
  font-size:14px;
  border: 1.33px solid #ddd;                   /* v13-B: bordo esterno */
}
.table thead th, .table-fse thead th{
  background: rgba(180,180,180,.2); color:#000;
  font-size:14px; font-weight:600;
  padding:8px; text-align:left;
  border-top: none;                            /* v13-B: no top border */
  border-bottom: none;                         /* v13-B: no bottom border */
  border-left: 1.33px solid #ddd;              /* v13-B: sì L */
  border-right: 1.33px solid #ddd;             /* v13-B: sì R */
  vertical-align: bottom;
}
.table tbody td, .table-fse tbody td{
  padding:5px;                                 /* v13-B: 5px su tutti i lati */
  border: 1.33px solid #ddd;                   /* v13-B: bordo su tutti 4 lati */
  vertical-align: top;                         /* v13-B: era middle */
  background: transparent;
  line-height: 1.42857143;
}
.table tbody tr:nth-child(odd) td,
.table-fse tbody tr:nth-child(odd) td{ background: var(--fse-table-row-odd); }
.table-fse td.num, .table-fse th.num { text-align:right; font-variant-numeric: tabular-nums; }
.table-fse .modulo-principale td{ font-weight:700; background: rgba(180,180,180,.2); }
.table-fse .modulo-totale td{ font-weight:700; background: rgba(180,180,180,.12); }

/* v13-struct-CSS-B: riga firmata / inviata / confermata
   L'ufficiale usa style inline con i 3 colori Bootstrap "success".
   Noi lo impostiamo tramite classe .fse-row-firmata (list_pe.php la mette
   quando stato in {'firmata','inviata'}) e sovrascriviamo anche la
   zebra per le righe dispari. */
.table tbody tr.fse-row-firmata > td,
.table-fse tbody tr.fse-row-firmata > td,
.table tbody tr:nth-child(odd).fse-row-firmata > td,
.table-fse tbody tr:nth-child(odd).fse-row-firmata > td {
  color: #3c763d !important;
  background-color: #dff0d8 !important;
  border-color: #d6e9c6 !important;
}

/* --- Form ---------------------------------------------------------------
   v6 FIX: label weight 400 (era 600), input-bg #EEE (era #DDD),
           border 1.33px (era 1px). */
label, .control-label{
  display:inline-block; font-size:14px; color:#000;
  font-weight:400;                              /* v6: era 600 */
  margin-bottom:5px;
}
label.required::after, .control-label.required::after{
  content:" *"; color: var(--fse-danger);
}
.form-control, input[type="text"], input[type="number"],
input[type="email"], input[type="password"],
input[type="date"], select, textarea{
  /* L13 Page 2 parity ORIG: padding 5px (era 6px 10px), border 1.33px
     rgb(139,139,139). font-size 14px e border-radius 3px già OK. */
  height:34px; padding:5px; font-size:14px;
  background: var(--fse-input-bg);              /* v6: #EEE */
  border: 1.33px solid rgb(139,139,139);        /* parity ORIG */
  border-radius:3px; color:rgb(51,51,51); width:100%; box-sizing:border-box;
  font-family: var(--fse-base-font);
  line-height:20px;
}
textarea{ height:auto; min-height:68px; }
.form-control[disabled], .form-control[readonly],
input[disabled], select[disabled]{
  /* L13 Page 2 parity ORIG:
     - input text disabled  → bg rgb(221,221,221) (più scuro)
     - input number disabled → bg rgb(244,244,244) (più chiaro)
     - default generico .form-control readonly → bg rgb(238,238,238) */
  background: rgb(238,238,238) !important;
  cursor: not-allowed;
}
input[type="text"][disabled], input[type="text"][readonly]{
  background: rgb(221,221,221) !important;
}
input[type="number"][disabled], input[type="number"][readonly]{
  background: rgb(244,244,244) !important;
}
.form-control:focus{
  outline:none; border-color: var(--fse-blue-primary);
  box-shadow: 0 0 0 2px rgba(77,144,254,.2);
}
.form-control.required-red, input.required-red{
  border-color: var(--fse-input-red-border) !important;
}
/* L13 Page 5 parity ORIG: tutti i .form-control.required hanno bordo
   marrone scuro rgb(165,42,42) (sia in stato readonly che editable). */
.form-control.required,
input.required,
select.required{
  border-color: rgb(165,42,42) !important;
}
.help-block{ display:block; color:#888; font-size:12px; margin-top:4px; }
/* L13 Page 2 parity ORIG: form-group margin-bottom 15px (era 12px) */
.form-group{ margin-bottom:15px; }
/* Label parity ORIG: font 14px 400 color #000 margin 2px 0 5px */
.form-group > label, .form-group > .control-label{
  font-size:14px; font-weight:400; color:#000; margin:2px 0 5px;
  display:inline-block; line-height:20px;
}

/* --- Pulsanti -----------------------------------------------------------
   v6 FIX: font-weight 400 (era 600), border-radius 0 default (era 3px).
           Eccezione: .green mantiene 3.33px (come nell'ufficiale). */
.btn{
  display:inline-block; padding:6px 14px; font-size:13px; font-weight:400;  /* v6: era 600 */
  line-height:1.4; border:1px solid transparent; border-radius:0;           /* v6: era 3px */
  cursor:pointer; text-decoration:none; background:#eee; color:#333;
}
.btn:hover{ filter: brightness(.92); text-decoration:none; }
.btn.btn-large{ padding:9px 18px; font-size:15px; }
.btn.btn-sm{ padding:3px 8px; font-size:12px; }
.btn.btn-block{ display:block; width:100%; }

.btn.blue, .btn-primary, .btn.btn-primary, .btn-fse-primary{ background: var(--fse-blue-primary); color:#fff; }
.btn.green, .btn.btn-success, .btn-fse-success{ background: var(--fse-green); color:#fff; border-radius:3.33px; } /* v6: eccezione */
.btn.red, .btn.btn-danger, .btn-fse-danger{ background: var(--fse-danger); color:#fff; }
.btn.yellow, .btn.btn-warning, .btn-fse-warning{ background: var(--fse-yellow); color:#fff; }
.btn.orange{ background: var(--fse-orange); color:#fff; }
.btn.purple{ background: var(--fse-purple); color:#fff; }
.btn.btn-default, .btn-fse-secondary{ background:#fff; color:#333; border:1px solid #ccc; }
.btn.dark{ background: rgb(85,85,85); color:#fff; }

.radius-1-i{ border-radius:3px !important; }
.radius-2-i{ border-radius:18px !important; width:36px; height:36px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
/* v6b: bottoncino icona RETTANGOLARE (colonne Moduli / Percorsi del catalogo +
        azioni riga Elenco percorsi). Sostituisce .radius-2-i dove serve il
        pattern ufficiale (rettangolo 38x28 angolo 3px). */
.btn-icon-rect{
  border-radius:3px !important;
  width:38px; height:28px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:13px; line-height:1;
}
.btn-icon-rect .fa{ font-size:14px; }
.d-block{ display:block; }
.w-100{ width:100%; }

.btn[disabled], .btn.disabled{ opacity:.6; cursor:not-allowed; filter:grayscale(.2); }

/* --- Toolbar in fondo ai form ------------------------------------------- */
.fse-form-actions{
  margin-top:20px; padding-top:15px; border-top:1px solid #eee;
  display:flex; gap:10px; justify-content:flex-end;
}

/* --- Alert -------------------------------------------------------------- */
.alert{ padding:10px 14px; border-radius:3px; margin-bottom:15px; font-size:13px; border:1px solid transparent;}
.alert-success{ background:#dff0d8; border-color:#d0e9c6; color:#3c763d;}
.alert-warning{ background: var(--fse-alert-warn-bg); border-color: var(--fse-alert-warn-border); color:#8a6d3b;}
.alert-danger{ background:#f2dede; border-color:#ebccd1; color:#a94442;}
.alert-info{ background: var(--fse-info-box-bg); border-color: var(--fse-info-box-border); color:#31708f;}

/* --- Modal ---------------------------------------------------------------
   v6 FIX: header trasparente con testo nero (era dark bg + white text).
           Allinea al pattern del portale ufficiale. */
.modal-content{ background:#fff; border-radius:3px; }
.modal-header{
  background:transparent; color:#000;            /* v6 */
  border-bottom:1px solid #e5e5e5; padding:12px 15px;
}
.modal-header .close{
  color:#000; opacity:.6; text-shadow:none;
  font-size:20px; font-weight:700; background:none; border:none;
}
.modal-header .close:hover{ opacity:1; }
.modal-header .modal-title{
  color:#000; font-size:16px; font-weight:700; margin:0;
}
.modal-body{ padding:15px; background:#fff; }
.modal-footer{
  padding:10px 15px; border-top:1px solid #e5e5e5;
  text-align:right; background:#fff;
}

/* --- Stato P.E. (badge) ------------------------------------------------- */
.fse-stato{
  display:inline-block; padding:3px 10px; font-size:11px; font-weight:700;
  border-radius:3px; color:#fff; text-transform:uppercase; letter-spacing:.5px;
}
.fse-stato.bozza{        background: var(--fse-yellow); }
.fse-stato.lavorazione{  background: var(--fse-blue-primary); }
.fse-stato.firmata{      background: var(--fse-green); }
.fse-stato.inviata{      background: var(--fse-purple); }
.fse-stato.errore{       background: var(--fse-danger); }

/* --- Box Totale dati economici ------------------------------------------ */
.fse-total-box{
  background:#fff; border:1px solid #e5e5e5; padding:14px 20px;
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:10px;
}
.fse-total-box .label-tot{ font-size:14px; color:#555; font-weight:600; }
.fse-total-box .amount{ font-size:22px; font-weight:700; color: var(--fse-green); }

/* --- Login page --------------------------------------------------------- */
.fse-login{
  min-height:100vh;
  background: linear-gradient(180deg, #f5f5f5 0%, #e8e8e8 100%);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.fse-login .box{
  background:#fff; border:1px solid #ddd; padding:30px;
  max-width:440px; width:100%;
  box-shadow: 0 2px 12px rgba(0,0,0,.08); border-radius:4px;
}
.fse-login .stemma{ display:block; margin: 0 auto 14px; height:110px; width:auto; }
.fse-login h1{
  text-align:center; color: var(--fse-green);
  font-size:17px; font-weight:700; margin:0 0 4px; line-height:1.3;
}
.fse-login .subtitle{ text-align:center; color:#888; font-size:12px; margin:0 0 22px; }
.fse-login .form-group{ margin-bottom:12px; }
.fse-login .btn-submit{
  width:100%; margin-top:10px;
  background: var(--fse-green); color:#fff; font-weight:700;
  padding:10px; font-size:14px; border:none; cursor:pointer; border-radius:3.33px; /* v6: eccezione green */
}
.fse-login .btn-submit:hover{ background:#2f9a60; }
.fse-login .notice{
  margin-top:18px; padding:10px 12px;
  background: var(--fse-alert-warn-bg); border:1px solid var(--fse-alert-warn-border);
  border-radius:3px; font-size:12px; color:#8a6d3b; text-align:center;
}

/* --- Footer istituzionale ----------------------------------------------- */
.fse-footer{
  background:#333; color:#ccc; padding:18px 20px; margin-top:30px;
  font-size:12px;
}
.fse-footer .container-fluid{
  max-width:1200px; margin:0 auto;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
}
.fse-footer a{ color:#fff; }

/* --- Utility ------------------------------------------------------------ */
.fse-muted{ color:#888; }
.fse-mb-0{ margin-bottom:0 !important; }
.fse-mt-20{ margin-top:20px; }
.text-center{ text-align:center; }
.text-right{ text-align:right; }

/* --- Stemma piccolo nel catalogo ---------------------------------------- */
.fse-catalogo-stemma{ height:50px; width:auto; }
/* ==========================================================================
   v7-sezione-2 — Dettaglio P.E. (append in coda a fse-skin.css)
   Stile in linea con il portale ufficiale:
   - intestazione piatta (niente portlet scura)
   - tabella sinottica compatta
   - sottosezioni dentro la portlet blu "Dettaglio Percorso"
   - pulsanti azione piccoli in basso a sinistra
   ========================================================================== */

/* ----- Intestazione PE (sostituisce la ex portlet scura) ----- */
.pe-detail-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin:0 0 10px;
  padding:0 2px 6px;
  border-bottom:1px solid #E5E5E5;
}
/* L13 Page 2 parity ORIG HAR/audit: h4.page-title ORIG è 30px weight 300
   color #666. Adeguiamo il nostro .pe-detail-title allo stesso peso
   visuale mantenendo linea di base per il layout flex. */
.pe-detail-title{
  font-size:30px;
  font-weight:300;
  color:#666;
  margin:0;
  line-height:1.2;
}
.pe-detail-title small{
  font-size:15px;
  font-weight:400;
  color:#888;
  margin-left:6px;
}
.pe-detail-head-actions{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}

/* Chip di stato piccolo (badge BOZZA discreto a destra del titolo) */
.pe-stato-chip{
  display:inline-block;
  font-size:11px;
  font-weight:600;
  line-height:1;
  padding:3px 8px;
  border-radius:3px;
  background:#EEE;
  color:#555;
  border:1px solid #DDD;
  letter-spacing:.3px;
  text-transform:uppercase;
}
.pe-stato-chip.badge-bozza        { background:#FFF7DB; color:#8A6D1A; border-color:#F0D879; }
.pe-stato-chip.badge-in_lavorazione{ background:#E1ECFF; color:#1E4E9E; border-color:#B7CEF4; }
.pe-stato-chip.badge-firmata      { background:#DDF3DD; color:#2D7A2D; border-color:#A8DBA8; }
.pe-stato-chip.badge-inviata      { background:#DDF3DD; color:#2D7A2D; border-color:#A8DBA8; }
.pe-stato-chip.badge-errore       { background:#FBE0E0; color:#9D2727; border-color:#F0B4B4; }

/* ----- Tabella sinottica (4 righe in testa al tab Dettaglio) ----- */
.pe-sinottica{
  margin:0 0 14px;
  border:1px solid #DDD;
}
.pe-sinottica th,
.pe-sinottica td{
  padding:6px 10px !important;
  font-size:13px;
  vertical-align:top;
}
.pe-sinottica th{
  background:#F7F7F7;
  color:#444;
  font-weight:600;
  width:28%;
}
.pe-sinottica td .fse-muted{
  font-size:12px;
  color:#888;
  margin-left:4px;
}

/* ----- Sottosezioni dentro la portlet blu "Dettaglio Percorso" ----- */
.pe-subsection-title{
  font-size:13px;
  font-weight:600;
  color:#4B8DF8;
  margin:2px 0 10px;
  padding:0 0 4px;
  border-bottom:1px dashed #CFE0F7;
  text-transform:uppercase;
  letter-spacing:.4px;
}
.pe-subsection-sep{
  border:0;
  border-top:1px solid #EEE;
  margin:14px 0 12px;
}

/* ----- v13-struct-L3b: azioni SALVA + Annulla pixel-parity ORIG -----
   ORIG usa btn-large blue (submit) + btn-warning (anchor) dentro
   col-md-2 .form-group style="margin-top:25px".
   Teniamo gap piccolo tra i due pulsanti e allineiamoli a sinistra
   senza border-top (ORIG non ha separatore). */
.pe-detail-actions{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:4px;
}
.pe-detail-actions .form-group{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:0;
}
/* Parità ORIG: btn-large blue + btn-warning devono avere stessa altezza */
.pe-detail-actions .btn.btn-large{
  padding:10px 19px;
  font-size:17px;
  line-height:1.47;
  border-radius:4px;
}
.pe-detail-actions .btn.btn-warning{
  padding:10px 19px;
  font-size:17px;
  line-height:1.47;
  background-color:#f0ad4e;
  border-color:#eea236;
  color:#fff;
}
.pe-detail-actions .btn.btn-warning:hover{
  background-color:#ec971f;
  border-color:#d58512;
  color:#fff;
  text-decoration:none;
}

/* Muted riutilizzabile */
.fse-muted{ color:#888; font-size:12px; }
/* ==========================================================================
   v7b-sezione-3 — Tab Allievi + tab-bar allineata a destra
   Append in coda a fse-skin.css
   ========================================================================== */

/* ----- Tab-bar P.E. allineata a destra (come portale ufficiale) ----- */
.fse-tabs-pe{
  justify-content:flex-end;
}

/* ----- Tab Allievi: toolbar count + bottone "Destinatario" ----- */
.pe-allievi-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:2px 0 10px;
}
.pe-allievi-count{
  font-size:13px;
  font-weight:600;
  color:#444;
}
.pe-allievi-toolbar .btn{
  padding:5px 14px;
  font-size:12px;
}

/* ----- Tabella Allievi: pulsante ELIMINA rosso compatto ----- */
.pe-allievi-table td.text-right{
  white-space:nowrap;
}
.pe-allievi-table .pe-elimina-btn{
  background:#e62e2e;
  border-color:#c92525;
  color:#fff;
  font-weight:600;
  font-size:11px;
  letter-spacing:.4px;
  padding:4px 10px;
  border-radius:3px;
  text-transform:uppercase;
  margin-left:4px;
}
.pe-allievi-table .pe-elimina-btn:hover{
  background:#c92525;
  color:#fff;
}
.pe-allievi-table .btn.green.btn-icon-rect{
  /* eredita .btn-icon-rect da v6b; forziamo il colore ok */
  color:#fff;
}
/* ==========================================================================
   v7c-iscrizione — Pagina full-page "Iscrizione destinatario"
   Append in coda a fse-skin.css (dopo v7b)
   Valori derivati da audit DOM parallelo (Chrome-Claude) su
   fse.regione.sicilia.it/avvisoPOC/iscrizione-allievo
   ========================================================================== */

/* ----- Contenitore pagina form ----- */
.pe-form-page{
  background:#fff;
  padding:6px 10px 14px;  /* v7c.1 compact */
}

/* Fieldset stile ufficiale (legenda grande + separatore sottile) */
.pe-form-page fieldset,
.pe-form-fieldset{
  border:0;
  margin:0 0 10px 0;      /* v7c.1 compact (era 19) */
  padding:0 0 6px 0;      /* v7c.1 compact (era 14) */
}
.pe-form-page legend.bold,
.pe-form-fieldset > legend{
  font-size:19px;         /* v7c.1 (era 21) per allineamento ufficiale */
  font-weight:600;
  color:#333;
  border:0;
  border-bottom:1.33px solid #e5e5e5;
  padding:0 0 4px 0;      /* v7c.1 compact (era 8) */
  margin:0 0 8px 0;       /* v7c.1 compact (era 14) */
  width:100%;
  display:block;
  line-height:1.2;
}
.pe-form-page .form-group{
  margin-bottom:8px;      /* v7c.1 compact (era 15 di bootstrap) */
}

/* Etichette + asterisco richiesto — dimensioni ufficiali */
.pe-form-page label,
.pe-form-fieldset label{
  font-size:13px;
  font-weight:400;        /* v7c.1: label normale come ufficiale (era 600) */
  color:#333;
  margin-bottom:3px;      /* v7c.1 compact */
  line-height:1.3;
}
.pe-form-page .control-label{
  font-weight:400;
}
.pe-req-star{
  color:#e02222;
  font-size:12px;
  margin-left:2px;
  font-weight:700;
}

/* ----- Input/select nel form full-page (parità portale) -----
   Bordo 1.33px grigio medio, radius 3px, padding 5 */
.pe-form-page .form-control{
  height:34px;
  padding:5px 8px;
  font-size:13px;
  color:#333;
  background:#fff;
  border:1.33px solid #8b8b8b;
  border-radius:3px;
  box-shadow:none;
}
.pe-form-page .form-control:focus{
  border-color:#4d90fe;
  box-shadow:0 0 0 2px rgba(77,144,254,.15);
  outline:0;
}
/* Campo obbligatorio non compilato: bordo marrone (come ufficiale) */
.pe-form-page .form-control.required,
.pe-form-page .form-control.is-required-empty{
  border-color:#a52a2a;
}
.pe-form-page .help-block.error,
.pe-form-page .text-danger{
  color:#a94442;
  font-size:12px;
  margin-top:3px;
}

/* Radio / checkbox condizione occupazionale */
.pe-form-page .radio-inline,
.pe-form-page .checkbox-inline{
  margin-right:18px;
  font-size:13px;
  font-weight:400;
}

/* ----- Box CAPTCHA (solo create, centrato orizzontalmente) ----- */
.pe-form-captcha{
  margin:0 0 14px 0;
  text-align:center;       /* v7c.1: centra legend + box */
}
.pe-form-captcha > legend{
  text-align:center;
}
.pe-captcha-box{
  display:inline-block;    /* resta inline-block → centrato dal parent text-align */
  border:1px solid #ddd;
  background:#fafafa;
  padding:6px;
  border-radius:3px;
  margin-bottom:8px;
  text-align:center;       /* img + help + input centrati nel box */
}
.pe-captcha-img{
  display:block;
  width:250px;
  height:132px;
}
.pe-captcha-help{
  color:#777;
  font-size:12px;
  margin:4px 0 6px;
}
.pe-captcha-input{
  max-width:250px;
}

/* ----- Toolbar azioni (alto-destra + basso-destra) ----- */
.actions.btn-set.pe-form-actions-top{
  float:right;
  margin:0 0 10px 0;
}
.actions.btn-set.pe-form-actions-bottom{
  text-align:right;
  margin:18px 0 4px;
  clear:both;
}
.pe-form-actions-top .btn,
.pe-form-actions-bottom .btn{
  margin-left:6px;
}

/* ----- Bottoni pagina iscrizione (override radius/padding per parità) ----- */
.pe-form-page .btn{
  border-radius:0;
  font-size:13px;
  font-weight:400;
  letter-spacing:.2px;
}
.pe-form-page .btn.btn-sm,
.pe-form-page .btn-sm{
  padding:4px 10px;
  font-size:12px;
}
.pe-form-page .btn.blue,
.pe-form-page .btn-primary{
  background:#4d90fe;
  border-color:#357ae8;
  color:#fff;
  padding:7px 14px;
}
.pe-form-page .btn.blue:hover,
.pe-form-page .btn-primary:hover{
  background:#357ae8;
  color:#fff;
}
.pe-form-page .btn.btn-warning,
.pe-form-page .btn.orange{
  background:#f0ad4e;
  border-color:#eea236;
  color:#fff;
  padding:7px 14px;
}
.pe-form-page .btn.btn-warning:hover,
.pe-form-page .btn.orange:hover{
  background:#ec971f;
  color:#fff;
}

/* ----- Testata della pagina iscrizione (riuso .pe-detail-head) ----- */
.pe-form-page .pe-detail-head{
  margin-bottom:6px;
}

/* v7c.3 — Layout a tutta larghezza SU TUTTO IL SITO (parità ufficiale).
   Il portale ufficiale non limita la larghezza: header, navstrip, contenuto
   e footer vanno edge-to-edge. Rimuovo il cap a 1200px che il CSS v6+ aveva
   su tutti i wrapper principali. */
.fse-header .container-fluid,
.fse-navstrip .container-fluid,
.fse-footer .container-fluid{
  max-width:none !important;
  padding-left:24px;
  padding-right:24px;
}
.fse-wrap{
  max-width:none !important;
  padding-left:24px;
  padding-right:24px;
}
/* Bootstrap .container / .container-fluid generici all'interno dell'area
   contenuto: anche questi tolti dal cap, così form e tabelle riempiono
   tutto. */
.fse-wrap > .container,
.fse-wrap > .container-fluid,
.content > .container,
.content > .container-fluid{
  max-width:none !important;
  width:100%;
  padding-left:0;
  padding-right:0;
}

/* Anti-autofill: campo hidden pseudo-casuale (l'ufficiale usa un name offuscato
   per impedire che Chrome pre-compili la CF). Lo nascondo anche visivamente. */
.pe-form-hidden-honeypot{
  position:absolute !important;
  left:-9999px !important;
  top:-9999px !important;
  width:1px !important;
  height:1px !important;
  opacity:0 !important;
  pointer-events:none !important;
}
/* ==========================================================================
   v8-sezione-4 — Pagina full-page "Iscrizione Personale Non Docente"
   Append in coda a fse-skin.css (dopo v7c)
   Valori derivati da audit DOM parallelo (Chrome-Claude) su
   fse.regione.sicilia.it/avvisoPOC → pagina Aggiungi/Modifica Personale ND
   ========================================================================== */

/* ----- Bottone verde "Indietro" Personale ND (RGB 53,170,71, border-radius 0) -----
   Nel portale ufficiale "Indietro" qui è GREEN (diverso dal form Allievi dove è blu).
   La classe .radius-1-i assicura priorità sugli override Bootstrap. */
.pe-form-page .btn.green,
.pe-form-page .btn.green.radius-1-i,
.pe-form-actions-top .btn.green,
.pe-form-actions-top .btn.green.radius-1-i{
  background:#35aa47;
  border-color:#2b8e3b;
  color:#fff;
  border-radius:0 !important;
  padding:7px 14px;
  font-size:13px;
  font-weight:400;
}
.pe-form-page .btn.green:hover,
.pe-form-page .btn.green.radius-1-i:hover,
.pe-form-actions-top .btn.green:hover,
.pe-form-actions-top .btn.green.radius-1-i:hover{
  background:#2b8e3b;
  color:#fff;
}

/* ----- Riga a 4 colonne (Email | Data nascita | Ruolo | Esterno = 4/4/2/2) -----
   Il portale ufficiale ha questa riga più compatta: il gap tra form-group è
   leggermente ridotto per tenere tutto su una riga senza wrap a viewport medi. */
.pe-form-4cols > [class*="col-"]{
  padding-left:8px;
  padding-right:8px;
}
.pe-form-4cols .form-group{
  margin-bottom:8px;
}

/* ----- Tabella Personale ND: stessi token della tabella Allievi v7b ----- */
.pe-personale-table{
  font-size:13px;
  margin-top:0;
}
.pe-personale-table > thead > tr > th{
  background:#f5f5f5;
  border-bottom:1.33px solid #ddd;
  font-weight:600;
  color:#333;
}
.pe-personale-table > tbody > tr > td{
  vertical-align:middle;
}
.pe-personale-table > tbody > tr > td strong{
  font-weight:600;
  color:#333;
}

/* ----- Toolbar conteggio Personale ND (riuso delle stesse regole Allievi) -----
   La classe .pe-allievi-toolbar + .pe-allievi-count è già definita in v7b;
   non ridefinisco qui. Per coerenza visiva il tab Personale ND usa
   lo stesso pattern col contatore a sinistra e il bottone + a destra. */

/* ----- Ruolo+Esterno: il <select> standard è alto 34px; in col-md-2 il
   label può andare a capo. Riduco leggermente il font della label per
   tenerlo su una riga. */
.pe-form-4cols .col-md-2 > .form-group > label{
  font-size:12.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ----- Forzatura border-radius:0 globale sui bottoni della pagina iscrizione:
   già presente in v7c (.pe-form-page .btn). Qui aggiungo la classe helper
   .radius-1-i per poterla applicare anche fuori dal contesto .pe-form-page. */
.btn.radius-1-i{
  border-radius:0 !important;
}
/* ==========================================================================
   v9-sezione-5 — Tab Stage + Pagina "Aggiungi Impresa/Ente"
   Append in coda a fse-skin.css (dopo v8)
   Valori derivati da audit DOM parallelo (Chrome-Claude) su
   fse.regione.sicilia.it/avvisoPOC → pagina Stage + Aggiungi Impresa/Ente
   ========================================================================== */

/* ----- Portlet ROSSA "Dettaglio STAGE" ------------------------------------
   Header rosso pieno (rgb 224,34,34). Altezza 37.33px, caption 18px (NON h4).
   Usata dalla v7 per il blocco principale tab Dettaglio — qui confermo gli
   stessi token anche per il nuovo blocco Stage. */
.pe-stage-portlet.portlet.red > .portlet-title,
.pe-stage-portlet .portlet-title.portlet-title-red{
  background:#e02222;
  border-bottom:1px solid #b91d1d;
  min-height:37.33px;
  padding:8px 14px;
}
.pe-stage-portlet .portlet-title .caption,
.pe-stage-portlet .portlet-title .caption-subject{
  color:#fff;
  font-size:18px;
  font-weight:600;
  line-height:22px;
  display:inline-block;
}
.pe-stage-portlet .portlet-title .caption > i{
  color:#fff;
  font-size:16px;
  margin-right:6px;
}

/* ----- Banner verde chiaro "Giornate di stage previste..." (h3.help) ------
   bg rgb(247,247,247), border rgba(60,97,62,0.53), border-left 4px double. */
/* L13 Page 5 parity ORIG: h3.help ORIG ha color rgb(0,64,35) (verde scuro),
   font-weight 700, padding 8px, margin 5px 0 10px, line-height 15.4px.
   Manteniamo bordo sinistro verde per riconoscibilità visuale. */
.pe-stage-help,
h3.help.pe-stage-help,
h3.help{
  background:#f7f7f7;
  border:1px solid rgba(60,97,62,0.53);
  border-left:4px double rgba(60,97,62,0.53);
  color:rgb(0,64,35);
  font-size:14px;
  font-weight:700;
  line-height:1.1;
  padding:8px;
  margin:5px 0 10px;
}

/* ----- Campi read-only grigi (Ore stage, giornate min/max) -----------------
   bg rgb(221,221,221) — come il portale ufficiale. */
.pe-stage-ro[disabled],
.pe-stage-ro[readonly],
input.pe-stage-ro,
.pe-form-page input.pe-stage-ro{
  background:#dddddd !important;
  color:#555 !important;
  cursor:not-allowed;
}

/* ----- Toolbar "Aggiungi Impresa/Ente" -----------------------------------
   Stessa meccanica della toolbar Allievi/Personale: conteggio sx + bottone dx.
   Qui il conteggio è opzionale (portale ufficiale non lo mostra). */
.pe-imprese-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  padding:10px 14px;
  border-bottom:1px solid #e5e5e5;
  background:#fff;
}
.pe-imprese-toolbar .btn.blue{
  padding:7px 14px;
  font-size:13px;
  font-weight:400;
  border-radius:0;
}

/* ----- Tabella Imprese/Enti: stessi token delle altre liste (Allievi, Personale) */
.pe-imprese-table{
  font-size:13px;
  margin-top:0;
}
.pe-imprese-table > thead > tr > th{
  background:#f5f5f5;
  border-bottom:1.33px solid #ddd;
  font-weight:600;
  color:#333;
}
.pe-imprese-table > tbody > tr > td{
  vertical-align:middle;
}
.pe-imprese-table > tbody > tr > td strong{
  font-weight:600;
  color:#333;
}

/* ----- Bottone "Torna indietro" GRIGIO (btn.default) ----------------------
   Nel form Impresa il pulsante Indietro è grigio (diverso da Personale dove
   è verde). rgb(229,229,229) / hover rgb(205,205,205). */
.pe-form-page .btn.default,
.pe-form-page .btn.default.radius-1-i,
.pe-form-actions-top .btn.default,
.pe-form-actions-top .btn.default.radius-1-i{
  background:#e5e5e5;
  border-color:#cccccc;
  color:#333;
  border-radius:0 !important;
  padding:7px 14px;
  font-size:13px;
  font-weight:400;
}
.pe-form-page .btn.default:hover,
.pe-form-page .btn.default.radius-1-i:hover,
.pe-form-actions-top .btn.default:hover,
.pe-form-actions-top .btn.default.radius-1-i:hover{
  background:#cdcdcd;
  border-color:#bdbdbd;
  color:#222;
}

/* ----- Form Impresa: riga 2/2/6/2 (Prov|Com|Ind|Civ) usa .pe-form-4cols
   già definita in v8, ma serve un fix di allineamento perché le label
   hanno larghezze diverse ("Provincia" vs "Indirizzo"). Forzo:
   - label in .pe-form-impresa .pe-form-4cols su 1 riga fissa
   - altezza uniforme per tutte le celle (label + input/select)
   Così le input/select delle 4 colonne condividono la stessa y-offset. */
.pe-form-impresa .pe-form-4cols .control-label,
.pe-form-impresa .pe-form-4cols > [class*="col-"] > .form-group > label{
  display:block;
  height:20px;
  line-height:20px;
  font-size:13px;
  font-weight:600;
  margin-bottom:6px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* Uniforma altezza di input text + select nelle righe 4-colonne (34px Bootstrap 3) */
.pe-form-impresa .pe-form-4cols .form-control{
  height:34px;
  line-height:20px;
}

/* ----- Bottoni SALVA + Annulla del tab Stage: stessa altezza, stessa
   dimensione, allineati verticalmente alla riga Giornate Stage (col-md-3).
   Label del form-group sopra l'input vale ~26px; i bottoni vengono dopo
   un <label>&nbsp;</label> "fantasma" per pareggiare il top-offset. */
.pe-stage-actions{
  padding-top:26px; /* pareggia l'altezza della label "Giornate Stage" */
}
.pe-stage-actions .pe-stage-btn{
  height:34px;
  line-height:18px;
  padding:7px 18px;
  font-size:13px;
  font-weight:600;
  border-radius:2px;
  margin-right:6px;
  display:inline-block;
  vertical-align:top;
}
.pe-stage-actions .pe-stage-msg{
  display:inline-block;
  margin-left:8px;
  vertical-align:middle;
  line-height:34px;
}

/* ----- Small tweak: legend con span text-muted "- Compilare se diversa..."
   deve restare inline e non andare a capo. */
.pe-form-impresa .pe-form-fieldset > legend .text-muted{
  font-size:13px;
}
/* =================================================================
   v10 APPEND — Tab "Dati Economici" (pixel-accurate vs portale ufficiale)
   ================================================================= */

/* Wrapper standalone della pagina Dati Economici.
   v10b: il sito è edge-to-edge (fse-wrap ha max-width:none dal v7c.3),
   quindi qui NON cappiamo più a 1400px - lasciamo che il contenuto riempia
   il parent e che figli (portlet, UCS table) si estendano a tutta larghezza. */
.fse-de-page{
  width:100%;
  padding:6px 0 24px;
}
.fse-de-page > .fse-de-form,
.fse-de-page > .fse-de-portlet,
.fse-de-page > .fse-de-ucs-wrap{
  width:100%;
}
.fse-de-portlet{ width:100%; }
.fse-de-fasce-table,
.fse-de-ucs-table{ width:100% !important; }
.fse-de-alert{
  margin:10px 0 14px;
  padding:10px 14px;
  border-radius:2px;
  font-size:13px;
}

/* ---------------- 1) Bottone Indietro (in alto) ---------------- */
/* Audit: rgb(75,141,248) bg, border rgb(180,206,248), testo bianco, fa-long-arrow-left */
.fse-de-btn-indietro{
  display:inline-block;
  background-color:rgb(75,141,248);
  border:1px solid rgb(180,206,248);
  color:#fff;
  font-size:13px;
  font-weight:400;
  padding:6px 14px;
  border-radius:2px;
  line-height:1.42857143;
  margin:0 0 16px 0;
  text-decoration:none;
  transition:background-color .15s ease;
}
.fse-de-btn-indietro:hover,
.fse-de-btn-indietro:focus,
.fse-de-btn-indietro:active{
  background-color:rgb(61,124,225);
  border-color:rgb(165,195,240);
  color:#fff;
  text-decoration:none;
}
.fse-de-btn-indietro i{ margin-right:6px; }

/* ---------------- 2) Portlet blu "Distribuzione ore docenza aula/FAD" ----- */
/* Audit: BG header rgb(75,141,248), border rgb(180,206,248), caption 18px weight 400 */
.fse-de-portlet{
  border:1px solid rgb(180,206,248);
  border-radius:0;
  margin-bottom:24px;
  background:#fff;
  box-shadow:none;
}
.fse-de-portlet > .portlet-title{
  background-color:rgb(75,141,248);
  color:#fff;
  padding:10px 14px;
  border:0;
  border-radius:0;
  min-height:42px;
  display:flex;
  align-items:center;
}
.fse-de-portlet > .portlet-title .caption{
  color:#fff;
  font-size:18px;
  font-weight:400;
  line-height:1.2;
  display:inline-flex;
  align-items:center;
}
.fse-de-portlet > .portlet-title .caption i{
  margin-right:8px;
  font-size:16px;
}
.fse-de-portlet > .portlet-body{
  padding:16px;
  background:#fff;
}

/* ---------------- 3) Tabella interna "Fasce professionali docenti" -------- */
.fse-de-fasce-table{
  width:100%;
  margin-bottom:0;
  border:1px solid #ddd;
  background:#fff;
}
.fse-de-fasce-table > thead > tr > th,
.fse-de-fasce-table > tbody > tr > td,
.fse-de-fasce-table > tbody > tr > th{
  border:1px solid #ddd;
  padding:8px 10px;
  vertical-align:middle;
  font-size:13px;
  line-height:1.42857143;
}

/* Header principale colspan=4 */
.fse-de-fasce-h1{
  background-color:#f5f5f5;
  font-weight:600;
  font-size:14px;
  color:#333;
  text-align:left;
}
/* Sub-header Fascia A/B/C */
.fse-de-fasce-sub{
  background-color:#fafafa;
  font-weight:600;
  text-align:center;
  width:22%;
}
/* Label di riga (sinistra) */
.fse-de-fasce-lbl{
  background-color:#fafafa;
  font-weight:600;
  text-align:left;
  width:34%;
}

/* Righe info "Ore minime/massime" */
.fse-de-fasce-info > td:not(.fse-de-fasce-lbl){
  text-align:center;
  color:#555;
}
/* Riga degli input */
.fse-de-fasce-input > td{
  text-align:center;
}
/* v10b: nel portale ufficiale il bordo rosso rgb(165,42,42) è lo stato
   DI DEFAULT degli input ore presunte (non solo :invalid). Il clone deve
   mostrare lo stesso visual: tutti e tre gli input con bordo rosso,
   a prescindere dal valore. La :invalid HTML5 viene sovrascritta con
   lo stesso colore per non cambiare aspetto. */
.fse-de-input-ore,
.fse-de-input-ore:invalid{
  width:110px;
  max-width:100%;
  display:inline-block;
  height:32px;
  padding:5px 8px;
  font-size:13px;
  text-align:center;
  border:1px solid rgb(165,42,42);
  border-radius:2px;
  background:#fff;
  box-shadow:none;
}
.fse-de-input-ore:focus{
  border-color:rgb(165,42,42);
  outline:0;
  box-shadow:0 0 0 2px rgba(165,42,42,.18);
}
.fse-de-input-ore[readonly]{
  background-color:#f7f7f7;
  color:#666;
  cursor:not-allowed;
  border-color:#ccc;
}

/* Riga bottone Salva, colspan=4 centrato */
.fse-de-fasce-save{
  text-align:center !important;
  padding:14px 10px !important;
  background:#fff;
}

/* Bottone Salva blu */
.fse-de-btn-salva{
  background-color:rgb(77,144,254);
  border:1px solid rgb(77,144,254);
  color:#fff;
  font-size:13px;
  font-weight:600;
  padding:7px 18px;
  border-radius:0;
  line-height:1.42857143;
  height:34px;
  min-width:110px;
  transition:background-color .15s ease;
}
.fse-de-btn-salva:hover,
.fse-de-btn-salva:focus,
.fse-de-btn-salva:active{
  background-color:rgb(61,124,225);
  border-color:rgb(61,124,225);
  color:#fff;
}
.fse-de-btn-salva i{ margin-right:6px; }
.fse-de-lock-msg{
  color:#a94442;
  font-size:13px;
  font-weight:600;
  padding:8px 0;
  display:inline-block;
}

/* ---------------- 4) Titolo h4 "Dati economici - Riferimento ..." -------- */
/* Audit: color rgb(102,102,102), font 30px weight 300 */
.fse-de-title{
  color:rgb(102,102,102);
  font-size:30px;
  font-weight:300;
  line-height:1.2;
  margin:24px 0 12px 0;
  padding:0;
  letter-spacing:-0.2px;
}

/* ---------------- 5) Tabella UCS (riepilogo) ---------------------------- */
.fse-de-ucs-wrap{
  margin-bottom:18px;
  overflow-x:auto;
}
.fse-de-ucs-table{
  width:100%;
  margin-bottom:0;
  border:1px solid #ddd;
  background:#fff;
  font-size:13px;
}
.fse-de-ucs-table > tbody > tr > th,
.fse-de-ucs-table > tbody > tr > td{
  border:1px solid #ddd;
  padding:8px 10px;
  vertical-align:middle;
  line-height:1.42857143;
}
.fse-de-ucs-table > tbody > tr:nth-of-type(odd) > td,
.fse-de-ucs-table > tbody > tr:nth-of-type(odd) > th{
  background-color:#f9f9f9;
}
/* Header cells (in tbody, non thead) */
.fse-de-ucs-head{
  background-color:#f5f5f5 !important;
  font-weight:600;
  color:#333;
  text-align:center;
  vertical-align:middle !important;
}
/* Cella "UCS docenti aula/FAD" con 3 righe (Fascia A/B/C + formula) */
.fse-de-ucs-fasce{
  font-size:12px;
  line-height:1.5;
  white-space:nowrap;
  color:#333;
}
.fse-de-ucs-table td small{
  color:#888;
  font-size:11px;
  font-weight:400;
}

/* Cella "Totale" a destra - rowspan=2 con box-shadow */
/* Audit: box-shadow rgba(0,0,0,0.25) 0 0 20px, font h4-ish, align middle */
.fse-de-total-head{
  background-color:#fff !important;
  border:1px solid #ddd !important;
  text-align:center !important;
  vertical-align:middle !important;
  width:180px;
  min-width:160px;
  padding:16px 12px !important;
  box-shadow:rgba(0,0,0,0.25) 0 0 20px;
  position:relative;
  z-index:1;
  font-size:16px;
  font-weight:600;
  color:#333;
}
.fse-de-total-val{
  display:block;
  margin-top:8px;
  font-size:20px;
  font-weight:700;
  color:rgb(75,141,248);
  letter-spacing:-0.2px;
}

/* ---------------- 6) Nota finale ---------------------------------------- */
.fse-de-note{
  margin-top:10px;
  padding:8px 12px;
  background:#f6f8fc;
  border-left:3px solid rgb(75,141,248);
  color:#555;
  font-size:12px;
  font-style:italic;
}
.fse-de-note i{
  color:rgb(75,141,248);
  margin-right:6px;
}

/* ---------------- Responsiveness (<992px) ------------------------------ */
@media (max-width: 991px){
  .fse-de-title{ font-size:24px; }
  .fse-de-input-ore{ width:90px; }
  .fse-de-total-head{
    width:auto;
    min-width:140px;
    padding:12px 8px !important;
  }
  .fse-de-total-val{ font-size:18px; }
  .fse-de-ucs-fasce{ white-space:normal; font-size:11.5px; }
}
/* =================================================================
/* =================================================================
   v11 APPEND — Tab "Verifica e Conferma P.E." (pixel-accurate vs portale ufficiale)
   Richiede v10 append caricato prima (per le utility layout).
   ================================================================= */

/* ---------------- Metronic-like utility classes (subset usato qui) ---- */
/* Rispettano i nomi esatti visti nel DOM ufficiale (me-2, mt-3, mx-auto,
   mb-3, mb-5, p-2, d-inline-block, d-none, float-right, bg-blue,
   bg-grey-light-i, underline-off-i, bold).
   Globali (no scope .fse-wrap: il DOM del clone non ha quel wrapper). */
.me-2       { margin-right:6.67px !important; }
.mt-3       { margin-top:10px !important; }
.mb-3       { margin-bottom:10px !important; }
.mb-5       { margin-bottom:25px !important; }
.p-2        { padding:6.67px !important; }
.mx-auto    { margin-left:auto !important; margin-right:auto !important; display:block; }
.d-inline-block { display:inline-block !important; }
.d-none     { display:none !important; }
.float-right{ float:right !important; }
.bold       { font-weight:600 !important; }
.mb-0       { margin-bottom:0 !important; }
.me-1       { margin-right:3.33px !important; }
.underline-off-i,
.underline-off-i:hover,
.underline-off-i:focus{ text-decoration:none !important; }
.bg-blue    { background-color:rgb(75,141,248) !important; color:#fff !important; }
.bg-grey-light-i{ background-color:#f0f0f0 !important; }

/* Override di .text-warning: l'ufficiale usa ocra rgb(138,109,59), non il
   giallo bootstrap #8a6d3b. Hover più scuro. */
.fse-ver-portlet .text-warning,
.fse-ver-apri-sezione{
  color:rgb(138,109,59) !important;
}
.fse-ver-apri-sezione:hover,
.fse-ver-apri-sezione:focus{
  color:rgb(102,81,44) !important;
  text-decoration:none !important;
}

/* Verde/rosso "text-*" allineati al portale (verde rgb(60,118,61)) */
.fse-ver-portlet .text-success{ color:rgb(60,118,61) !important; }
.fse-ver-portlet .text-danger { color:rgb(169,68,66)  !important; }

/* L14 parity ORIG: i 2 bottoni nel blocco "LA PROGETTAZIONE ESECUTIVA
   COMPILATA NON PRESENTA ERRORI" (CONFERMA verde + STAMPA BOZZA P.E.)
   sono dentro <p class="text-center"> ma il CSS base rende .btn block-level
   → il text-align:center del padre non li centra.
   Forziamo display inline-block sui figli diretti del paragrafo così il
   text-center del padre funziona. Gap 6px orizzontale tra i bottoni. */
.fse-ver-portlet .portlet-body p.text-center > form,
.fse-ver-portlet .portlet-body p.text-center > a.btn,
.fse-ver-portlet .portlet-body p.text-center > button.btn {
  display: inline-block !important;
  vertical-align: middle !important;
  margin: 4px 3px !important;
}
.fse-ver-portlet .portlet-body p.text-center > form > .btn,
.fse-ver-portlet .portlet-body p.text-center > form > button {
  display: inline-block !important;
  vertical-align: middle !important;
}

/* ---------------- 1) Bottone Indietro (in alto, identico al v10) ------- */
.fse-ver-btn-indietro{
  background-color:rgb(75,141,248);
  border:1px solid rgb(180,206,248);
  color:#fff !important;
  font-size:13px;
  font-weight:400;
  line-height:1.42857143;
  border-radius:2px;
  text-decoration:none !important;
  transition:background-color .15s ease;
}
.fse-ver-btn-indietro:hover,
.fse-ver-btn-indietro:focus,
.fse-ver-btn-indietro:active{
  background-color:rgb(61,124,225);
  border-color:rgb(165,195,240);
  color:#fff !important;
}
.fse-ver-btn-indietro i{ margin-right:6px; }

/* ---------------- 2) Portlet BLU "Verifica e Conferma..." ------------- */
/* Audit: box blue con bordo rgb(180,206,248) L/R/Bottom (no top),
   header blu pieno rgb(75,141,248), caption 18px/400. */
.fse-ver-portlet{
  border:1.33px solid rgb(180,206,248);
  border-top:0;
  border-radius:0;
  margin-bottom:24px;
  background:#fff;
  box-shadow:none;
  width:100%;
}
.fse-ver-portlet > .portlet-title{
  background-color:rgb(75,141,248);
  color:#fff;
  padding:10px 14px;
  border:0;
  border-radius:0;
  min-height:42px;
  display:flex;
  align-items:center;
}
.fse-ver-portlet > .portlet-title .caption{
  color:#fff;
  font-size:18px;
  font-weight:400;
  line-height:1.2;
  display:inline-flex;
  align-items:center;
}
.fse-ver-portlet > .portlet-title .caption i{
  margin-right:8px;
  font-size:16px;
}
.fse-ver-portlet > .portlet-body{
  padding:16px;
  background:#fff;
}

/* ---------------- 3) Zero-state e risultato (esito_verifica) ---------- */
#esito_verifica{
  min-height:40px;
}
#esito_verifica > p.text-center{
  font-size:14px;
  color:#333;
  padding:10px 0;
  margin:0 0 10px;
}
#esito_verifica hr{
  margin:8px 0 14px;
  border:0;
  border-top:1px solid #e5e5e5;
}

/* Titolo verde/rosso "LA PROGETTAZIONE ESECUTIVA ..." — 24px, weight 500 */
#esito_verifica .h3{
  font-size:24px;
  font-weight:500;
  line-height:1.2;
  letter-spacing:-0.2px;
  display:inline-block;
  padding:4px 0;
}

/* ---------------- 4) Bottone AVVIA VERIFICA (pre e post) -------------- */
.fse-ver-btn-avvia{
  background-color:rgb(75,141,248);
  border:1px solid rgb(75,141,248);
  color:#fff;
  font-size:13px;
  font-weight:600;
  padding:7px 18px;
  border-radius:2px;
  line-height:1.42857143;
  height:34px;
  min-width:150px;
  text-transform:uppercase;
  transition:background-color .15s ease;
}
.fse-ver-btn-avvia:hover,
.fse-ver-btn-avvia:focus,
.fse-ver-btn-avvia:active{
  background-color:rgb(61,124,225);
  border-color:rgb(61,124,225);
  color:#fff;
}
.fse-ver-btn-avvia[disabled]{
  opacity:.65;
  cursor:not-allowed;
}

/* ---------------- 5) Bottone CONFERMA (verde success) ----------------- */
.fse-ver-btn-conferma{
  background-color:rgb(92,184,92);
  border:1px solid rgb(76,174,76);
  color:#fff !important;
  font-size:13px;
  font-weight:600;
  padding:7px 18px;
  border-radius:2px;
  line-height:1.42857143;
  text-transform:uppercase;
  text-decoration:none !important;
  transition:background-color .15s ease;
}
.fse-ver-btn-conferma:hover,
.fse-ver-btn-conferma:focus,
.fse-ver-btn-conferma:active{
  background-color:rgb(68,157,68);
  border-color:rgb(57,132,57);
  color:#fff !important;
}

/* ---------------- 6) Bottone STAMPA BOZZA (Metronic "default") -------- */
/* NOTE: .btn.default (non .btn-default) — classe custom Metronic. */
.fse-wrap .btn.default,
.fse-ver-btn-stampa{
  background-color:rgb(229,229,229);
  border:1px solid rgb(229,229,229);
  color:#333 !important;
  font-size:13px;
  font-weight:600;
  padding:7px 18px;
  border-radius:2px;
  line-height:1.42857143;
  text-transform:uppercase;
  text-decoration:none !important;
  transition:background-color .15s ease;
}
.fse-wrap .btn.default:hover,
.fse-wrap .btn.default:focus,
.fse-ver-btn-stampa:hover,
.fse-ver-btn-stampa:focus{
  background-color:rgb(210,210,210);
  border-color:rgb(210,210,210);
  color:#333 !important;
}

/* ---------------- 7) Lista dei 10 check (list-group) ------------------ */
/* Audit: bg-grey-light #f0f0f0, bordo 1px #e5e5e5 solo bottom tranne
   l'ultima riga, padding 10px 15px, font 13px. */
.fse-ver-portlet .list-group{
  margin-bottom:0;
  border:1px solid #ddd;
  border-radius:0;
}
.fse-ver-portlet .list-group-item{
  border:0;
  border-bottom:1px solid #e5e5e5;
  padding:10px 15px;
  font-size:13px;
  line-height:1.5;
  background-color:#f0f0f0;
  color:#333;
}
.fse-ver-portlet .list-group-item:last-child{
  border-bottom:0;
}
/* Icona a sinistra: fa-list (ok) / fa-times-circle (ko), size 16px */
.fse-ver-portlet .list-group-item > i.fa{
  font-size:16px;
  vertical-align:middle;
  line-height:1;
}
/* Label centrale = <a> con colore success/danger, no underline */
.fse-ver-item-label{
  font-weight:400;
  vertical-align:middle;
}
/* Link "APRI SEZIONE ..." float right, ocra */
.fse-ver-apri-sezione{
  font-size:13px;
  font-weight:600;
  text-transform:none;
  vertical-align:middle;
}

/* Riga .section-errors = pannello cliccabile che rivela esito (OK/KO).
   Contenuto: <b class="text-success|text-danger">
                <i class="fa fa-check|fa-times"></i> messaggio</b>
   Default: d-none (hidden). Toggled dall'onclick sull'header. */
.fse-ver-portlet .section-errors{
  padding:10px 15px 10px 38px;
  font-size:13px;
  background-color:#fafafa;
  border-top:1px dashed #d7d7d7;
}
.fse-ver-portlet .section-errors > b{
  font-weight:600;
  display:inline-block;
}
.fse-ver-portlet .section-errors > b > i.fa{
  font-size:14px;
  margin-right:6px;
  vertical-align:middle;
  line-height:1;
}

/* ---------------- Responsiveness (<992px) ----------------------------- */
@media (max-width: 991px){
  .fse-ver-portlet > .portlet-title .caption{ font-size:16px; }
  #esito_verifica .h3{ font-size:20px; }
  .fse-ver-apri-sezione{
    float:none !important;
    display:block;
    margin-top:4px;
    padding-left:22px;
  }
  .fse-ver-btn-avvia,
  .fse-ver-btn-conferma,
  .fse-ver-btn-stampa{
    display:block;
    width:100%;
    max-width:260px;
    margin:6px auto !important;
  }
}
/* =================================================================
   v12 APPEND — pagina "Moduli formativi del profilo selezionato"
   (pixel-accurate vs portale ufficiale fse.regione.sicilia.it/avvisoPOC)
   Richiede v10 base + v11b append caricati prima (utility layout).
   ================================================================= */

/* ---------------- Utility classes Metronic (subset v12) ---------------- */
/* (globali, no scope .fse-wrap — v11b ha gia' rimosso lo scope) */

.bg-black-75-i   { background-color: rgba(0,0,0,0.75) !important; color:#fff !important; }
.bg-grey-50-i    { background-color: rgba(180,180,180,0.5) !important; }
/* bg-green / bg-red -> "pill" con gradiente verticale sottile (stile Metronic).
   Il portale ufficiale mostra un leggero rilievo sulle celle numeriche di totale;
   implementiamo con linear-gradient top->bottom di 8% di luminosita'. */
.bg-green {
  background-color: rgb(53,170,71) !important;
  background-image: linear-gradient(to bottom,
                      rgb(70,185,88) 0%,
                      rgb(45,148,60) 100%) !important;
  color: #fff !important;
}
.bg-red {
  background-color: rgb(224,34,34) !important;
  background-image: linear-gradient(to bottom,
                      rgb(237,70,70) 0%,
                      rgb(195,28,28) 100%) !important;
  color: #fff !important;
}
/* .shadow sulle celle-pill: ombra interna + esterna per staccarle dalla riga. */
.shadow {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25),
              0 1px 3px rgba(0,0,0,0.20) !important;
}
.ps-5-i          { padding-left: 2.5rem !important; } /* 40px */
.p-3             { padding: 10px !important; }
.border-1        { border: 1.33px solid #ddd !important; }

/* Bottoni di tipo Metronic: btn.blue (Google blue) e btn.yellow (amber). */
.btn.blue,
.fse-wrap .btn.blue {
  background-color: rgb(77,144,254) !important;
  border: 1px solid rgb(77,144,254) !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: 2px;
  line-height: 1.42857143;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background-color .15s ease;
}
.btn.blue:hover, .btn.blue:focus, .btn.blue:active,
.fse-wrap .btn.blue:hover, .fse-wrap .btn.blue:focus {
  background-color: rgb(61,124,225) !important;
  border-color: rgb(61,124,225) !important;
  color: #fff !important;
}

.btn.yellow,
.fse-wrap .btn.yellow {
  background-color: rgb(242,189,42) !important;
  border: 1px solid rgb(242,189,42) !important;
  color: #fff !important;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: 2px;
  line-height: 1.42857143;
  text-transform: uppercase;
  text-decoration: none !important;
  transition: background-color .15s ease;
}
.btn.yellow:hover, .btn.yellow:focus, .btn.yellow:active,
.fse-wrap .btn.yellow:hover, .fse-wrap .btn.yellow:focus {
  background-color: rgb(218,170,32) !important;
  border-color: rgb(218,170,32) !important;
  color: #fff !important;
}

/* ---------------- Portlet "Moduli formativi..." ------------------------
   Stesso look del portlet Verifica: bordo rgb(180,206,248) L/R/Bottom,
   header blu rgb(75,141,248), caption 18px/400.
   ----------------------------------------------------------------------- */
.fse-mod-portlet {
  border: 1.33px solid rgb(180,206,248);
  border-top: 0;
  border-radius: 0;
  margin-bottom: 24px;
  background: #fff;
  box-shadow: none;
  width: 100%;
}
.fse-mod-portlet > .portlet-title {
  background-color: rgb(75,141,248);
  color: #fff;
  padding: 10px 14px;
  border: 0;
  border-radius: 0;
  min-height: 42px;
  display: flex;
  align-items: center;
}
.fse-mod-portlet > .portlet-title .caption {
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.2;
  display: inline-flex;
  align-items: center;
}
.fse-mod-portlet > .portlet-title .caption i {
  margin-right: 8px;
  font-size: 16px;
}
.fse-mod-portlet > .portlet-body {
  padding: 16px;
  background: #fff;
}

/* ---------------- Intro con 3 bullet vincoli --------------------------- */
.fse-mod-intro {
  background: #fafafa;
  border: 1px solid #e5e5e5;
  border-radius: 2px;
  padding: 10px 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #333;
}
.fse-mod-intro ul { padding-left: 22px; }
.fse-mod-intro li { margin-bottom: 4px; }
.fse-mod-intro li:last-child { margin-bottom: 0; }

/* ---------------- Wrapper scrollabile tabella ------------------------- */
.fse-mod-tableblock {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------------- Tabella Moduli --------------------------------------- */
.fse-mod-table {
  width: 100%;
  margin-bottom: 0;
  background: #fff;
  font-size: 13px;
  border-collapse: separate;
  border-spacing: 0;
}
.fse-mod-table > thead > tr > th {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  padding: 10px 12px;
  vertical-align: middle;
  border-bottom: 1px solid #ddd;
  line-height: 1.3;
}
.fse-mod-table > thead > tr > th.ps-5-i {
  text-align: left;
}
.fse-mod-table > tbody > tr > td,
.fse-mod-table > tbody > tr > th {
  padding: 8px 12px;
  vertical-align: middle;
  border-top: 1px solid #e5e5e5;
  line-height: 1.45;
}
.fse-mod-table > tfoot > tr > td {
  padding: 8px 12px;
  vertical-align: middle;
  border-top: 2px solid #ddd;
  line-height: 1.45;
}

/* THEAD (HAR ufficiale): fondo nero-75, testo bianco. */
.fse-mod-table > thead.bg-black-75-i > tr > th {
  color: #fff;
  background-color: rgba(0,0,0,0.75);
}

/* Riga MODULO PARENT (HAR ufficiale v13-moduli-contrast):
   sfondo BIANCO, testo NERO grassetto, bordo sotto.
   Mostra inline i totali attesi (ore_aula / fad / stage) come <th>.
   CORREZIONE: la precedente versione usava bg-black-75-i + text-white, ma il
   portale ufficiale ha riga bianca con titolo in grassetto nero leggibile. */
.fse-mod-table > tbody > tr.fse-mod-parent > th,
.fse-mod-table > tbody > tr.fse-mod-parent > td {
  background-color: #ffffff;
  color: #000000;
  font-weight: 700;
  border-top: 2px solid #333;
  padding: 10px 12px;
  vertical-align: middle;
}
/* La prima colonna (MD code) resta nera leggermente piu' piccola. */
.fse-mod-table > tbody > tr.fse-mod-parent > th:first-child {
  color: #000;
  font-weight: 700;
  white-space: nowrap;
}

/* Riga CONOSCENZA CHILD (HAR ufficiale): sfondo bianco, NO riga grigia;
   la colonna MD ha text-right + icona fa-level-up ruotata (freccia indentatura). */
.fse-mod-table > tbody > tr.fse-mod-child > td {
  color: #333;
  background: #fff;
}
.fse-mod-table > tbody > tr.fse-mod-child .fa-level-up {
  color: #999;
  margin-right: 10px;
}

/* Riga TOTALE MODULO (HAR ufficiale):
   riga a fondo grigio traslucido (classe .bg-grey-50-i gia' applicata),
   SOLO le 3 celle numeriche hanno il pill colorato (bg-green.shadow /
   bg-red.shadow). Le 2 celle laterali (vuote) e la cella label restano grigie. */
.fse-mod-table > tbody > tr.fse-mod-tot-modulo > td,
.fse-mod-table > tbody > tr.fse-mod-tot-modulo > th {
  color: #333;
  border-top: 1px solid #ddd;
  padding: 8px 12px;
  background-color: transparent; /* non sovrascrive il grigio del <tr> */
}
.fse-mod-table > tbody > tr.fse-mod-tot-modulo > th.bg-green,
.fse-mod-table > tbody > tr.fse-mod-tot-modulo > td.bg-green,
.fse-mod-table > tbody > tr.fse-mod-tot-modulo > th.bg-red,
.fse-mod-table > tbody > tr.fse-mod-tot-modulo > td.bg-red {
  color: #fff !important;
  text-align: center;
  font-weight: 700;
}

/* Riga TOTALE GENERALE (HAR ufficiale): fondo nero-75, testo bianco.
   Applichiamo bg direttamente su td/th per non dipendere dal bg del TR
   (alcuni framework CSS sovrascrivono il bg delle celle). */
.fse-mod-table > tbody > tr.fse-mod-tot-generale > td,
.fse-mod-table > tbody > tr.fse-mod-tot-generale > th,
.fse-mod-table > tfoot > tr.fse-mod-tot-generale > td,
.fse-mod-table > tfoot > tr.fse-mod-tot-generale > th {
  color: #fff;
  border-top: 1px solid rgba(255,255,255,0.18);
  padding: 8px 12px;
  background-color: rgba(0,0,0,0.75);
}
.fse-mod-table > tbody > tr.fse-mod-tot-generale > th.bg-green,
.fse-mod-table > tbody > tr.fse-mod-tot-generale > th.bg-red,
.fse-mod-table > tfoot > tr.fse-mod-tot-generale > th.bg-green,
.fse-mod-table > tfoot > tr.fse-mod-tot-generale > th.bg-red {
  text-align: center;
  font-weight: 700;
}

/* Matita edit -- versione HAR ufficiale:
     <button class="btn btn-sm btn-warning editinformationconoscenza">
       <span class="glyphicon glyphicon-pencil"></span>
     </button>
   Bottone giallo/ocra Bootstrap-warning compatto (stessa larghezza del portale).
   La classe .fse-mod-edit e' aggiunta solo per agganciare il listener JS. */
.fse-mod-table .fse-mod-edit.btn-warning {
  background-color: rgb(242,189,42);
  border-color: rgb(218,170,32);
  color: #fff;
  padding: 4px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 2px;
}
.fse-mod-table .fse-mod-edit.btn-warning:hover,
.fse-mod-table .fse-mod-edit.btn-warning:focus {
  background-color: rgb(218,170,32);
  border-color: rgb(190,148,28);
  color: #fff;
}
.fse-mod-table .fse-mod-edit .glyphicon-pencil,
.fse-mod-table .fse-mod-edit .fa-pencil-square-o {
  color: #fff;
  font-size: 14px;
  vertical-align: middle;
  line-height: 1;
}

/* ---------------- Banner sola lettura (HAR ufficiale v13-moduli-contrast) ----
   Riga centrata con icona triangolo rossa e testo bold nero: matcha esattamente
   il portale ufficiale quando is_locked=true. NON alert-success verde. */
.fse-mod-readonly-banner {
  background: transparent;
  color: #000;
  padding: 14px 12px 10px;
  margin: 10px 0 16px;
  font-size: 14px;
  border: 0;
}
.fse-mod-readonly-banner .fa-exclamation-triangle {
  color: #d9534f;
  font-size: 20px;
  vertical-align: middle;
  margin-right: 10px;
}
.fse-mod-readonly-banner strong {
  color: #000;
  font-weight: 700;
  vertical-align: middle;
}

/* ---------------- Modale "Modifica modulo" ---------------------------- */
.fse-mod-modal .modal-content {
  border-radius: 2px;
}
.fse-mod-modal .modal-header {
  background-color: rgb(75,141,248);
  color: #fff;
  border-bottom: 0;
  padding: 10px 14px;
  border-radius: 2px 2px 0 0;
}
.fse-mod-modal .modal-header .modal-title {
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  margin: 0;
}
.fse-mod-modal .modal-header .close {
  color: #fff;
  opacity: 0.9;
  text-shadow: none;
  font-size: 22px;
  line-height: 1;
  margin-top: -2px;
}
.fse-mod-modal .modal-body {
  padding: 16px 20px;
  background: #fff;
}
.fse-mod-modal .modal-footer {
  padding: 10px 16px;
  border-top: 1px solid #e5e5e5;
  background: #f7f7f7;
  text-align: right;
}
.fse-mod-modal .form-group {
  margin-bottom: 14px;
}
.fse-mod-modal label {
  display: block;
  margin-bottom: 4px;
  font-size: 13px;
}
.fse-mod-modal .form-control {
  font-size: 13px;
  height: 34px;
  padding: 6px 10px;
  border-radius: 2px;
  border: 1px solid #d0d0d0;
}
.fse-mod-modal input[disabled],
.fse-mod-modal input[readonly] {
  background: #f0f0f0;
  cursor: not-allowed;
  color: #555;
}

/* ---------------- Responsive (<992px) ---------------------------------- */
@media (max-width: 991px) {
  .fse-mod-portlet > .portlet-title .caption { font-size: 16px; }
  .fse-mod-table { font-size: 12px; }
  .fse-mod-table > thead > tr > th { font-size: 11px; }
  .fse-mod-modal .modal-dialog.modal-lg {
    width: auto;
    margin: 10px;
  }
}

/* ---------------- Fix: coerenza .btn dentro fse-wrap ------------------ */
.fse-wrap .btn.blue i,
.fse-wrap .btn.yellow i {
  line-height: 1;
}

/* =================================================================
   v12-r5 APPEND — chiusura 3 code cosmetiche HAR audit (22/04/2026)
   1. .portlet.box.red  → bordo laterale/bottom rosso Metronic
   2. tabella Dati Economici layout "info row compatto"
   3. nessun CSS per iscrizione_allievo (solo PHP hidden fields)
   ================================================================= */

/* ---------------- 1. Portlet "box red" Metronic ------------------------
   Il portale ufficiale usa la classe .box per aggiungere il contorno
   laterale colorato. Solo le fasce L/R/Bottom; top e' il portlet-title
   rosso gia' stilato da v9. */
.portlet.box.red {
  border-left: 1px solid rgb(224,34,34);
  border-right: 1px solid rgb(224,34,34);
  border-bottom: 1px solid rgb(224,34,34);
  border-top: 0;
}
.portlet.box.red > .portlet-title {
  border-radius: 0;
  border-bottom: 0;
}
.portlet.box.red > .portlet-body {
  background: #fff;
}

/* ---------------- 2. Dati Economici "info row" compatta ---------------
   Nuovo layout (v12-r5) con una sola riga informativa (EQF + ore
   minime/massime per fascia) invece di 2 righe separate (min + max).
   Riallinea al portale ufficiale /pe/datieconomici/<token>.
   Le celle di info possono contenere <br> interno: gestiamo il padding
   verticale e il word-wrap per evitare "ballo" di altezza.            */
.fse-de-fasce-table > tbody > tr.fse-de-fasce-info > td {
  vertical-align: top;
  line-height: 1.45;
  padding: 8px 10px;
}
.fse-de-fasce-table > tbody > tr.fse-de-fasce-info > td.fse-de-fasce-lbl {
  font-weight: 600;
  white-space: nowrap;
}
/* .odd.gradeX e' la classe Metronic ufficiale per righe alternate:
   gli diamo il fondo lievemente grigio come nell'HAR. */
.fse-de-fasce-table > tbody > tr.odd {
  background-color: rgba(0,0,0,0.02);
}
.fse-de-fasce-table > tbody > tr.fse-de-fasce-input > td {
  vertical-align: middle;
}

/* Responsive: su schermi stretti le celle info tendono a troncare.
   Consentiamo wrap ma manteniamo la leggibilita'. */
@media (max-width: 767px) {
  .fse-de-fasce-table > tbody > tr.fse-de-fasce-info > td {
    font-size: 12px;
    line-height: 1.3;
  }
}