/****************************************************************************
* CSS RESIDENCIAS
******************************************************************************/

@import url("font-awesome-4.5.0/css/font-awesome.min.css");

/*
 * Variables
 ******************************************************************************/
 :root {
    /* Paleta corporativa (https://cdn.dipusevilla.es/skins/portal/index.html) */
    --color-principal: #005751;
    --color-secundario: #004943;
    --color-tercero: #287f7a;
    --color-complementario: #b8be14;
    --color-cuarto: #ea9f23;
    --color-quinto: #edad44;
    --color-sexto: #5e400e;
    --color-info: #356094;
    --color-exito: #009d71;

    --btn-amarillo-fondo: #fbecd3;
    --btn-amarillo-color: #5e400e;
    --btn-amarillo-borde: #f7d9a7;

    --color-alerta-principal: #632e33;
    --color-alerta-secundario: #f7727f;
	  --color-alerta-fondo: #fde3e5;
	  --color-alerta-borde: #fcc7cc;

    --color-gris-muyoscuro: #212529;
	  --color-gris-oscuro: #495057;
	  --color-gris-medio: #6c757d;
	  --color-gris-claro: #f8f9fa;

	  --color-blanco: #fff;
    --color-fondo-muyclaro: rgba(255,255,255,.6);
	  --color-fondo-claro: #e9ecef;
	  --color-fondo-medio: #c3c3c3;
	  --color-fondo-borde: #dee2e6;
    --color-fondo-amarillo: #fbecd3;
    --color-fondo-verde: #e6eeee;
    --color-fondo-exito: #ccebe3;

    --card-radius:18px;
}


/*
 * Estilos de yii
 ******************************************************************************/


html,
body {
    height: 100%;
    background: var(--color-gris-claro);
}

.wrap {
    min-height: 100%;
    height: auto;
    margin: 0 auto -60px;
    padding: 0 0 60px;
}

.wrap > .container {
    padding: 90px 5px;
}

@media (min-width: 1200px) {
  .container {
    width: 1190px;
  }
}

.footer {
    height: 60px;
    background-color: var(--color-fondo-claro);
    border-top: 1px solid var(--color-fondo-borde);
    padding-top: 20px;
}

.not-set {
    color: var(--color-alerta-secundario);
    font-style: italic;
}

@media (min-width: 768px){
.navbar-header {
  float: left;
  width: 320px;
  margin-top: -10px;
}
}


/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    position: relative;
    top: 1px;
    display: inline-block;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    padding-left: 5px;
}

a.asc:after {
    content: /*"\e113"*/ "\e151";
}

a.desc:after {
    content: /*"\e114"*/ "\e152";
}

.sort-numerical a.asc:after {
    content: "\e153";
}

.sort-numerical a.desc:after {
    content: "\e154";
}

.sort-ordinal a.asc:after {
    content: "\e155";
}

.sort-ordinal a.desc:after {
    content: "\e156";
}

.grid-view th {
    white-space: nowrap;
}

.grid-view {
    display: block;
	clear: both;
}

.error-summary {
    color: var(--color-alerta-principal);
    background: var(--color-alerta-fondo);
    border-left: 3px solid var(--color-alerta-borde);
    padding: 10px 20px;
    margin: 0 0 15px 0;
	overflow: hidden;
}

.info-summary {
    color: var(--color-secundario);
    background: var(--color-tercero)1f;
    border-left: 3px solid var(--color-tercero);
    padding: 10px 20px;
    margin: 0 0 15px 0;
	overflow: hidden;
}


.alert.alert-error  {
    color: var(--color-alerta-principal);
    background: var(--color-alerta-fondo);
    border-left: 3px solid var(--color-alerta-secundario);
    padding: 10px 20px;
    margin: 0 0 15px 0;
	overflow: hidden;
}
.alert.alert-success {
    color: #003f2d;
    background: var(--color-fondo-exito);
    border-left: 3px solid var(--color-exito);
    padding: 10px 20px;
    margin: 0 0 15px 0;
	overflow: hidden;
}

/* Estados con los colores suaves corporativos */
.alert-info {
    color: #15263b;
    background-color: #d6dfe9;
    border-color: #aec0d4;
}
.alert-warning {
    color: var(--btn-amarillo-color);
    background-color: var(--color-fondo-amarillo);
    border-color: var(--btn-amarillo-borde);
}
.alert-danger {
    color: var(--color-alerta-principal);
    background-color: var(--color-alerta-fondo);
    border-color: var(--color-alerta-borde);
}

.alert.fade {
    opacity: 1 !important;  /* Hace que las alertas sean visibles de inmediato */
    transition: none !important;  /* Elimina la animación de desvanecimiento */
}

.alert button.close {
	padding-right: 20px;
}


/*
 * Estilos personalizados
 ******************************************************************************/
 
body{
	font-family:Verdana, Geneva, sans-serif;
}
 
h1, .h1 {
	color: var(--color-principal);
    font-size: 170%;
	margin-bottom: 30px;
	clear: both;
  
}
h2, .h2 {
	color: var(--color-tercero);
    font-size: 150%;
	  margin-top: 50px;
    margin-bottom: 30px;
}

h3, .h3 {
	color: var(--color-tercero);
    font-size: 130%;  
}

h4, .h4 {
	color: var(--color-tercero);
    font-size: 120%;  
}

hr {
	border-color: var(--color-fondo-claro);
    margin-bottom: 40px;
    margin-top: 40px;
}

blockquote {
    border-left: 4px solid var(--color-fondo-borde);
    font-size: 90%;
    margin: 10px;
    padding: 0 10px 5px;
}


.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
  padding: 8px;
  line-height: 1.42857143;
  vertical-align: top;
  border-top: 1px solid var(--color-fondo-borde);
  font-size: 85%;
}

a {
  color: var(--color-secundario);
}
a:hover,
a:focus {
  color: var(--color-tercero);
}

.texto-centrado {	
	text-align: center;
}

.table-striped a{	
    /* white-space: nowrap; // En el catálogo no parte el título en dos líneas */
}
.table-striped .glyphicon{	
	padding-left: 3px;
	padding-right: 3px;
    font-size: 125%;
}
.table-striped .textoenlace{	
	font-size: 80%;
	padding-right: 6px;
}
.table-striped a:hover{	
	text-decoration:none;
}

/* Tabla ajustada **************************************************************************/

.grid-view-wrap table {
  width: 100%;
}

.grid-view-wrap th,
.grid-view-wrap td {
  vertical-align: middle;
}

.grid-view-wrap td {
  overflow-wrap: break-word;
  word-break: break-word;
}

.grid-view-wrap .form-control {
  min-width: 70px;
}

/* Botón mostrar ayuda en las intro *******************************************************/

.callout-toggle-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
}

.btn-callout-toggle{
  flex-shrink:0;
  padding:8px 16px;
  font-size:13px;
}

/* Botones ********************************************************************************/
 
/* Radio corporativo; el relleno es el de Bootstrap para que btn-sm y btn-lg mantengan su tamaño */
.btn {
    border-radius: 6px;
    margin-bottom: 3px;
}
  
.btn-default,
.btn-default:focus,
.btn-default:active ,
.btn-default.active,
.btn-default:focus:active {
    background-color: var(--color-secundario);
    border-color: var(--color-secundario);
    color: var(--color-blanco);
}
.btn-default:hover{
    background-color: var(--color-tercero);
    border-color: var(--color-tercero);
    color: var(--color-blanco);
}

.btn-primary,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:focus:active {
  color: var(--color-blanco);
  background-color: var(--color-principal);
  border-color: var(--color-principal);
}

.btn-primary:hover {
  background-color: var(--color-secundario);
  border-color: var(--color-secundario);
}

.btn-alerta,
.btn-alerta:focus,
.btn-alerta:active,
.btn-alerta.active,
.btn-alerta:focus:active  {
  background-color: var(--color-cuarto);
  border-color: var(--color-cuarto);
  color: #000;
}

.btn-alerta:hover {
  background-color: var(--color-quinto);
  border-color: var(--color-quinto);
  color: #000;
}

.btn-disabled{
    background-color: var(--color-fondo-claro);
    border-color: var(--color-fondo-medio);
    color: var(--color-gris-medio);
}

.btn-info,
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
	color: var(--color-blanco);
	background-color: var(--color-info);
	border-color: var(--color-info);
}

.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
	color: #000;
	background-color: var(--color-exito);
	border-color: var(--color-exito);
}

.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
	color: #000;
	background-color: var(--color-cuarto);
	border-color: var(--color-cuarto);
}

/* El rosa corporativo de peligro resulta demasiado llamativo en botones: se usa el de aviso */
.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
	color: #000;
	background-color: var(--color-cuarto);
	border-color: var(--color-cuarto);
}

/* Bootstrap 3 cambia el color del botón mientras se pulsa (:active:hover, :active:focus) con reglas más específicas: se mantienen los corporativos */
.btn-primary:active:hover, .btn-primary:active:focus, .btn-primary.active:hover, .btn-primary.active:focus {
	color: var(--color-blanco);
	background-color: var(--color-principal);
	border-color: var(--color-principal);
}
.btn-default:active:hover, .btn-default:active:focus, .btn-default.active:hover, .btn-default.active:focus {
	color: var(--color-blanco);
	background-color: var(--color-secundario);
	border-color: var(--color-secundario);
}
.btn-info:active:hover, .btn-info:active:focus, .btn-info.active:hover, .btn-info.active:focus {
	color: var(--color-blanco);
	background-color: var(--color-info);
	border-color: var(--color-info);
}
.btn-success:active:hover, .btn-success:active:focus, .btn-success.active:hover, .btn-success.active:focus {
	color: #000;
	background-color: var(--color-exito);
	border-color: var(--color-exito);
}
.btn-warning:active:hover, .btn-warning:active:focus, .btn-warning.active:hover, .btn-warning.active:focus,
.btn-danger:active:hover, .btn-danger:active:focus, .btn-danger.active:hover, .btn-danger.active:focus {
	color: #000;
	background-color: var(--color-cuarto);
	border-color: var(--color-cuarto);
}

.btn-xs, .btn-group-xs > .btn {
  padding: 2px 5px !important;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 4px !important;
}

  /* ======= BOTONES ======= */
  .btn:hover {
      filter: brightness(1.1);
  }
  /*
  .btn-boton-1:hover,
  .btn-boton-2:hover,
  .btn-boton-3:hover,
  .btn-botondesactivado1:hover,{
    color: #fff;
  }

  .btn-boton-4:hover,
  .btn-boton-5:hover{
    color: #333;
  }*/

  /* Botones volver */
  .btn-boton-1 {
    background-color: var(--color-principal);
    border: none;
    color: #fff !important;
  }

  /* Informes pdf, csv */
  .btn-boton-2 {
    background-color: var(--color-complementario);
    border: none;
    color: #000 !important;
  }

  /* Botones guardar / modificar */
  .btn-boton-3 {
    background-color: var(--color-tercero);
    border: none;
    color: #fff !important;
  }
  .btn-boton-4 {
    background-color: var(--color-cuarto);
    border: none;
    color: #000 !important;
  }
  .btn-boton-5 {
    background-color: var(--color-quinto);
    border: none;
    color: #000 !important;
  }
  .btn-boton-desactivado {
    background-color: var(--color-gris-medio);
    border: none;
    color: #fff !important;
  }
  /* Botón ayuda */
  .btn-boton-ayuda {
    background-color: var(--color-tercero);
    border: none;
    color: #fff !important;
  }



/* Menú superior ********************************************************************************/

.navbar-inverse .btn-link {
    color: var(--color-blanco);
    padding-bottom: 0;
    padding-top: 14px;
	margin-left: 40px;
}
.navbar-inverse .navbar-brand {
    color: var(--color-blanco);
}
.navbar-inverse .navbar-nav > li > a {
    color: var(--color-blanco);
}
.navbar-inverse .navbar-nav > li > a:hover {
    background-color: #666;
}

.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
    background-color: var(--color-tercero);
    color: var(--color-blanco);
}


   
/* --- Brand logo + título en una línea (BS3) --- */
.navbar-inverse .navbar-brand{
    display: inline-flex !important;   
    align-items: center;
    height: 50px;                      
    line-height: normal;                
    padding: 0 15px;                 
    gap: 8px;
    color: var(--color-blanco) !important;
    font-weight: 600;
    letter-spacing: -.2px;
    max-width: none;      /* elimina límites */
    white-space: nowrap;  /* evita salto de línea */  
    padding-top: 20px;
}

.navbar-header {
    display: flex;
    align-items: center;
}
  
.navbar-inverse .navbar-brand .navbar-logo{
    height: 30px;
    width: auto;
    display: inline-block;            
    vertical-align: middle;
    padding-right: 15px;
}
  
.navbar-inverse .navbar-brand .brand-title{
    display: inline-block;
    line-height: 1;                    /* evita saltos */
    font-size: 90%;
}

  /* Tablas y estilos generales ******************************************************************************/


.grid-view .summary{
	margin-bottom: 10px;
	font-size: 90%;
	color: var(--color-fondo-medio);
}

.grid-view .columnaenlace a{
	text-decoration: underline;
}

.botones-acciones{
	text-align: right;
}

th.action-column{
	min-width: 55px;
}


.pagination > .active > a, 
.pagination > .active > span, 
.pagination > .active > a:hover, 
.pagination > .active > span:hover, 
.pagination > .active > a:focus, 
.pagination > .active > span:focus {
    background-color: var(--color-tercero);
    border-color: var(--color-tercero);
	color: var(--color-blanco);
}

.pagination li a{
  color: var(--color-tercero);
}

.pagination > li > a:hover,
.pagination > li > a:focus{
  color: var(--color-secundario);
}

div .form{
	margin-top: 30px;
}

.listadoincompleto {
	color: var(--color-sexto) !important;
}


.listadocompleto {
	color: var(--color-tercero);
}

#columnaizquierda{
	width: 60%;
	float: left;
	margin-bottom: 25px;
}
#columnaderecha {
	width: 40%;
	float: left;
	margin-bottom: 25px;
}

.columna-sinmargen{
	margin-bottom: 0px !important;
}

.columna70{
	width: 70% !important;
}
.columna50{
	width: 50% !important;
}
.columna30{
	width: 30% !important;
}

form div.required label::after{
	content: '*';
	padding-left: 5px;
}

.campotexto {
    height: 400px;
    width: 100%;
    resize: vertical; /* Permite que el usuario lo redimensione verticalmente */
}


/* Index *********************************************************************************************/

.acciones-nowrap{
    text-wrap: nowrap;
    font-size: 105% !important;
}
.acciones-nowrap a{
    padding: 0px 3px;
}
/*.acciones-nowrap a:nth-child(1) { color: var(--color-principal); } 
.acciones-nowrap a:nth-child(2) { color: var(--color-tercero); }
.acciones-nowrap a:nth-child(3) { color: var(--color-cuarto); } */

/* Celdas con varios botones (Mis cursos): uno debajo de otro (celda-lista) o en fila (celda-botones) */
.celda-lista{
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}
.celda-lista .btn{
    margin: 0;
    text-align: left;
    white-space: nowrap;
}
.celda-botones{
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    min-width: 150px;
}
.celda-botones .btn{
    margin: 0;
    white-space: nowrap;
}
.celda-lista .glyphicon,
.celda-botones .glyphicon{
    margin-right: 6px;
}
.celda-vacia{
    color: var(--color-fondo-medio);
}
.envio-hecho{
    color: #003f2d;
    font-size: 12px;
    padding: 2px 0;
}
.envio-hecho a{
    color: #003f2d;
    text-decoration: underline;
}

/* Botón con borde: descargas y acciones secundarias */
.btn-contorno,
.btn-contorno:focus,
.btn-contorno:active{
    background-color: var(--color-blanco);
    border: 1px solid var(--color-principal);
    color: var(--color-principal);
}
.btn-contorno:hover{
    background-color: var(--color-principal);
    color: var(--color-blanco);
}

/* Portada *********************************************************************************************/

/* ======= BASE ======= */
body.portada {
    background: var(--color-fondo-claro);
}

.portada .wrap > .container { 
    width: 100%;
    padding: 0px;
    padding-top: 50px;
}


/* ======= HERO ======= */
.hero {
    position: relative;
    width: 100%;
    height: 400px; 
    overflow: hidden;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center;
    /*filter: brightness(0.65);*/
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(0,0,0,.75) 0%,
        rgba(0,0,0,.4) 20%,
        rgba(0,0,0,.1) 80%
    );
    display: flex;
    align-items: center;
}

.hero-overlay .container {
    color: var(--color-blanco);
}

.hero h1 {
    color: var(--color-blanco);
    font-weight: 800;
    font-size: 230%;
    line-height: 1.15;
}

.hero h2 {
    color: var(--color-blanco);
    /*font-weight: 400;
    opacity: .9;*/
}

.hero p {
    color: var(--color-blanco);
    max-width: 60%;
    /*font-size: 1.1rem;
    margin-top: 15px;*/
}

/* ======= CARDAS misma altura =========*/
/* Forzar altura uniforme en tarjetas */
.cards-row {
  display: flex;
  flex-wrap: wrap;
}

/* Cada columna se comporta como flex */
.cards-row > [class*="col-"] {
  display: flex;
}

/* Tarjeta ocupa toda la altura */
.cards-row .card {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* El cuerpo de la tarjeta también en columna */
.cards-row .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Texto ocupa espacio flexible */
.cards-row .card-text {
  flex-grow: 1;
}

/* Zona de botones SIEMPRE abajo */
.cards-row .card-body > .mt-auto {
  margin-top: auto;
}

/* Separación entre botones internos */
.cards-row .card-body p {
  margin-bottom: 6px;
}

/* Último botón sin margen extra */
.cards-row .card-body p:last-child {
  margin-bottom: 0;
}



/* ======= CARDS ======= */
.portada {
    .card {
        border: none;
        border-radius: 18px;
        padding: 12px;
        background-color: var(--color-blanco)
    }

    .card-title {
        font-weight: 700;
        font-size: 120%;
    }

    .card-text {
        font-size: 100%;
        color: var(--color-gris-oscuro);
    }

    .hover-card {
        transition: all .25s ease;
    }

    .hover-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 30px rgba(0,0,0,.12);
    }

    .card-body img {
        width: 100%;
        height: auto;
    }
    
    /* Para igualar la altura al ser bootstrap 3*/
    /* Fuerza que todas las cards tengan la misma altura */
    .row.cards-row {
        display: flex;
        flex-wrap: wrap;
        padding-top: 30px;
    }

    .row.cards-row > [class^="col-"] {
        display: flex;
    }

    /* Card completa en columna */
    .row.cards-row .card {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto; /* todas las cards mismas altura */
    }

    /* Card body también en columna para empujar botón */
    .row.cards-row .card-body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
    }

    /* Botón pegado al fondo */
    .row.cards-row .card-body .btn {
        margin-top: auto;
    }

} /* fin portada */


/* ======= RESPONSIVE ======= */
@media (max-width: 768px) {
    .hero {
        height: 280px;
    }

    .hero h1 {
        font-size: 2rem;
    }
}


/* Index - listados ***********************************************************************************/
    
  .page-shell { padding: 5px 0 10px; }
  .page-title { font-weight: 700; letter-spacing: -.2px; margin-top: 0px;}
  .page-subtitle { color: var(--color-gris-medio); margin-top: 6px; }
  
  .card-soft{
    border: 0;
    border-radius: var(--card-radius);
    box-shadow: 0 10px 30px rgba(0,0,0,.07);
    background-color: var(--color-blanco);
    margin-bottom: 10px;
  }

  .card-soft .card-header{
    background: transparent;
    border-bottom: 1px solid rgba(0,0,0,.06);
    padding: 16px 18px;
    color: var(--color-secundario);
  }  

  .card-soft .section-title{
    background: transparent;
    border-bottom: 1px solid rgba(0,0,0,.06);
    padding: 0px;
    color: var(--color-secundario);
    font-weight: bold;
  }
  
  .card-soft .section-block{
    margin-top:20px;
    margin-bottom:20px;
  }

  .card-soft .card-body{ padding: 18px; }

  
  .card-vista {
    margin-top: 15px;
  }
  
  .card-vista h4{
    margin-top: 30px;
  }
  
  .callout{
    background: var(--color-fondo-verde);
    border: 1px solid rgba(0,87,81,.15);
    border-left: 6px solid var(--color-secundario);
    border-radius: 14px;
    padding: 14px 16px;
  }

  .callout.mb-3{
    margin-bottom: 15px;
  }

  .callout .icono{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--color-quinto);
    margin-top:6px;
    float: left;
    margin-right: 10px;
  }
  
  .iconook{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--color-tercero);
    margin-top:6px;
    float: left;
    margin-right: 10px;
  }

  .iconoalerta{
    width:10px;
    height:10px;
    border-radius:50%;
    background:var(--color-alerta-principal);
    margin-top:6px;
    float: left;
    margin-right: 10px;
  }

  .callout .callout-text{
    color: var(--color-gris-medio);
  }

  .callout .title{
    color: var(--color-secundario);
  }
  
  .kpi{
    background:#fff;
    border-radius: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(0,0,0,.25);
    box-shadow: 0 8px 18px rgba(0,0,0,.05);
  }
  
  .kpi-bloque{
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .kpi-bloque-vista{
    margin-bottom: 15px;
  }
    
  .kpi .label{ color: var(--color-gris-medio); font-size: 80%; padding-left: 0px; }
  .kpi .value{ font-size: 1.35rem; font-weight: 800; margin-top: 2px; }
  
  .badge-soft-green{
    background: rgba(0,87,81,.12);
    color: var(--color-secundario);
    border: 1px solid rgba(0,87,81,.18);
  }
  .badge-soft-yellow{
    background: var(--btn-amarillo-fondo);
    color: var(--btn-amarillo-color);
    border: 1px solid var(--btn-amarillo-borde);
  } 
  .badge-soft-alert{
    background: var(--color-alerta-fondo);
    color: var(--color-alerta-principal);
    border: 1px solid var(--color-alerta-borde);
  } 
  .badge-soft-gray{
    background: var(--color-gris-claro);
    color: var(--color-gris-medio);
  } 

  .table thead th{ border-top: 0; color:var(--color-gris-muyoscuro); }
  .table tbody tr:hover{ background: rgba(0,87,81,.04); }

  .text-muted-pequeno{
    color: var(--color-fondo-medio);
    font-size: 90%;
  }


/* Formulario de baremación *******************************************************/
/* KPI suave */
 .kpi-soft{
    background:#fff;
    border:1px solid rgba(0,0,0,.07);
    border-radius:14px;
    padding:14px 16px;
    box-shadow: 0 8px 18px rgba(0,0,0,.25);
    margin-bottom: 25px;
  }
  .kpi-soft__label{
    font-weight:700;
    color:var(--color-secundario);
    margin-bottom: 4px;
  }
  .kpi-soft__value{
    font-size: 28px;
    font-weight: 800;
    line-height: 1.1;
  }
  .kpi-soft__hint{
    margin-top: 6px;
    font-size: 12px;
  }
  
  /* Pestañas de las pantallas de una solicitud (ponente) */
  .nav-tabs.pestanas-solicitud{
    margin: 20px 0;
    border-bottom: 2px solid var(--color-principal);
  }
  .nav-tabs.pestanas-solicitud > li > a{
    margin-right: 4px;
    padding: 10px 16px;
    border: 1px solid var(--color-fondo-medio);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    background-color: var(--color-fondo-claro);
    color: var(--color-principal);
    font-weight: 600;
  }
  .nav-tabs.pestanas-solicitud > li > a:hover{
    background-color: var(--color-fondo-verde);
  }
  .nav-tabs.pestanas-solicitud > li.active > a,
  .nav-tabs.pestanas-solicitud > li.active > a:hover,
  .nav-tabs.pestanas-solicitud > li.active > a:focus{
    background-color: var(--color-principal);
    border-color: var(--color-principal);
    color: #fff;
  }
  .nav-tabs.pestanas-solicitud > li.disabled > a,
  .nav-tabs.pestanas-solicitud > li.disabled > a:hover{
    background-color: transparent;
    color: #9aa0a6;
    font-weight: normal;
  }

  /* Tabs (Bootstrap 3) con padding y sin “pegote” a bordes */
  .tabs-soft .nav-tabs{
    border-bottom: 1px solid rgba(0,0,0,.12);
    margin-bottom: 12px;
  }
  .tabs-soft .nav-tabs>li>a{
    border-radius: 10px 10px 0 0;
    padding: 10px 14px;
    font-weight: 200;
    color: var(--color-gris-medio);
    background-color: var(--color-gris-claro);
  }
  .tabs-soft  > li.tab-error > a{
    color: var(--color-alerta-principal) !important;
    font-weight:600;
  }
  
  .tabs-soft > li.active > a,
  .tabs-soft > li.active > a:hover, 
  .tabs-soft > li.active > a:focus {
    border: 1px solid var(--color-fondo-medio) !important;
    background-color: var(--color-blanco) !important;
    border-bottom-color: transparent !important;
    font-weight: bold;
  }
  .tabs-soft .tab-content{
    /* padding: 12px 12px 2px; // aire interior */
    /*background: rgba(255,255,255,.6);*/
    background-color: var(--color-fondo-muyclaro);
    border: 1px solid rgba(0,0,0,.07);
    border-radius: 12px;
    padding: 20px;
  }
  
  /* Form dentro de tabs: separación uniforme */
  .tabs-soft .tab-pane .row{ margin-left: -10px; margin-right: -10px; }
  .tabs-soft .tab-pane [class*="col-"]{ padding-left: 10px; padding-right: 10px; }
  .tabs-soft .tab-pane .form-group{ margin-bottom: 14px; }


  /* Ayuda dentro de tabs ****************/
  .tabhelp{
    background: var(--color-fondo-verde);
    border:1px solid rgba(0,0,0,.07);
    border-left:4px solid var(--color-tercero);
    border-radius:10px;
    padding:10px 12px;
    margin-bottom:14px;
    display:flex;
    gap:10px;
    align-items:flex-start;
    font-size:13px;
    color:var(--color-gris-medio);
  }
  .tabhelp__icon{
    margin-top:1px;
    color: var(--color-tercero);
  }
  .tabhelp__text{
    line-height:1.35;
  }
  
  /* Variantes */
  .tabhelp--warning{
    background: var(--color-fondo-amarillo);
    border-left-color:var(--color-quinto);
  }
  .tabhelp--warning .tabhelp__icon{ color: var(--color-quinto); }
  
  .tabhelp--success{
    background: var(--color-fondo-verde);
    border-left-color:var(--color-tercero);
  }
  .tabhelp--success .tabhelp__icon{ color: var(--color-tercero); }
  
  .tabhelp--neutral{
    background: var(--color-fondo-claro);
    border-left-color: var(--color-gris-claro);
  }
  .tabhelp--neutral .tabhelp__icon{ color: var(--color-gris-claro); }
  
  .tabhelp__text p {
    margin: 0 0 6px 0;
  }
  
  .tabhelp__text ul {
    margin: 6px 0 6px 18px;
    padding: 0;
  }
  
  .tabhelp__text li {
    margin-bottom: 3px;
  }
  
  


  /* Enlace plegable */
  .tabhelp-toggle{ margin-bottom:12px; }
  .tabhelp-toggle__link{
    display:inline-block;
    font-weight:600;
    text-decoration:none;
  }
  .tabhelp-toggle__link span{ margin-right:6px; }

/* Login **************************************************************************/

.site-login .card-soft { margin-top: 10px; }
.site-login .form-control { border-radius: 10px; }
.site-login .btn-brand { border-radius: 10px; }


/* Formularios ********************************************************************/
.card-soft .form-control{
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,.30);
    box-shadow: none;
  }
  .card-soft .form-control:focus{
    border-color: rgba(0,87,81,.45);
    box-shadow: 0 0 0 3px rgba(0,87,81,.10);
  }
  
  /* Labels  */
  .card-soft .control-label{
    color:#333;
    font-weight:600;
  }
  
  /* Separación botones */
  .botones-acciones .btn{ margin-left:6px; }
	
	
/* Mensajes flash *************************************************************************/

.page-shell .flash-soft:first-child{
  margin-top: 0;
}

.flash-soft{
  position: relative;
  border: 1px solid rgba(0,0,0,.07);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 10px 0 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  background: #fff;
}
.flash-soft__inner{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.flash-soft__icon{
  margin-top:2px;
  font-size: 16px;
}
.flash-soft__title{
  font-weight:700;
  margin-bottom:2px;
}
.flash-soft__msg{
  color:#555;
  line-height:1.35;
}
.flash-soft__close{
  position:absolute;
  top:8px;
  right:10px;
  border:0;
  background:transparent;
  font-size: 20px;
  line-height:1;
  opacity:.6;
}
.flash-soft__close:hover{ opacity:1; }

/* Variantes */
.flash-soft--success{ border-left:4px solid var(--color-exito); background:var(--color-fondo-exito); }
.flash-soft--success .flash-soft__icon, .flash-soft--success .flash-soft__title{ color:#003f2d; }

.flash-soft--error{ border-left:4px solid var(--color-alerta-secundario); background:var(--color-alerta-fondo); }
.flash-soft--error .flash-soft__icon, .flash-soft--error .flash-soft__title{ color:var(--color-alerta-principal); }

.flash-soft--warning{ border-left:4px solid var(--color-quinto); background:var(--color-fondo-amarillo); }
.flash-soft--warning .flash-soft__icon, .flash-soft--warning .flash-soft__title{ color:var(--color-sexto); }

.flash-soft--info{ border-left:4px solid var(--color-info); background:#d6dfe9; }
.flash-soft--info .flash-soft__icon, .flash-soft--info .flash-soft__title{ color:var(--color-info); }

/* Textos de ayuda y error en campos formulario ********************************************/
.hint-block {
  display: block;
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--color-fondo-amarillo);
  border: 1px solid rgba(0,0,0,.06);
  border-left: 4px solid var(--color-quinto);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--color-gris-oscuro);
}

.catalog-browser .form-control{
  height: 48px;
  border: 1px solid rgba(0,87,81,.18);
  border-radius: 14px;
  box-shadow: none;
  padding: 10px 14px;
  font-size: 15px;
}

.catalog-browser .form-control:focus{
  border-color: rgba(0,87,81,.45);
  box-shadow: 0 0 0 3px rgba(0,87,81,.10);
}

.catalog-browser__buttons{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
}

.catalog-browser__group + .catalog-browser__group{
  margin-top: 26px;
}

.catalog-browser__group-title{
  margin: 0 0 14px;
  color: var(--color-secundario);
  font-size: 1.35em;
  font-weight: 700;
}

.catalog-browser__items{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.catalog-browser__item{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(0,87,81,.10);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(20,36,29,.05);
}

.catalog-browser__item-main{
  flex: 1 1 auto;
  min-width: 0;
}

.catalog-browser__item-title{
  color: #20354b;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
}

/* Cuando el título se renderiza como enlace <a> */
a.catalog-browser__item-title{
  color: var(--color-secundario);
  text-decoration: none;
}

a.catalog-browser__item-title:hover,
a.catalog-browser__item-title:focus{
  color: var(--color-tercero);
  text-decoration: underline;
}

.catalog-browser__item-meta{
  margin-top: 7px;
  color: #6a7381;
  font-size: .98rem;
  line-height: 1.5;
}

.catalog-browser__separator{
  display: inline-block;
  margin: 0 8px;
  color: #9aa4af;
}

.catalog-browser__item-actions{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.catalog-browser__inline-form{
  margin: 0;
}

.catalog-browser__action-btn{
  min-width: 118px;
}

.catalog-browser__badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
}

.catalog-browser__badge--success{
  background: rgba(0,87,81,.12);
  border: 1px solid rgba(0,87,81,.20);
  color: var(--color-secundario);
}

/* Acordeón de curso (cabecera del curso + ediciones desplegables) */
.catalog-browser__course{
  border: 1px solid rgba(0,87,81,.10);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(20,36,29,.05);
  overflow: hidden;
}

.catalog-browser__course-toggle{
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 16px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: #20354b;
  transition: background .15s ease;
}

.catalog-browser__course-toggle:hover,
.catalog-browser__course-toggle:focus{
  background: rgba(0,87,81,.05);
  outline: none;
}

.catalog-browser__course-title{
  flex: 1 1 auto;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
  color: #20354b;
}

/* Formularios de evaluación (coordinador, ponente, alumno): círculos de valoración más grandes y claros */
.evaluation-row .radio-inline{
  margin-left: 14px;
  margin-right: 0;
  font-size: 1rem;
}

.evaluation-row .radio-inline input[type="radio"]{
  width: 20px;
  height: 20px;
  margin-right: 4px;
  vertical-align: middle;
  cursor: pointer;
}

.catalog-browser__course-count{
  flex: 0 0 auto;
  font-size: .88rem;
  color: var(--color-secundario);
  background: rgba(0,87,81,.10);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}

.catalog-browser__course-chevron{
  flex: 0 0 auto;
  color: var(--color-secundario);
  transition: transform .25s ease;
}

.catalog-browser__course-toggle[aria-expanded="true"] .catalog-browser__course-chevron{
  transform: rotate(180deg);
}

.catalog-browser__editions{
  padding: 0 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.catalog-browser__editions .catalog-browser__item{
  border-color: rgba(0,87,81,.08);
  background: var(--color-fondo-muyclaro);
  box-shadow: none;
}

@media (max-width: 767px){
  .catalog-browser__course-toggle{
    flex-wrap: wrap;
    gap: 8px 10px;
  }

  .catalog-browser__course-count{
    order: 3;
  }

  .catalog-browser__course-chevron{
    order: 2;
    margin-left: auto;
  }
}

@media (max-width: 767px){
  .catalog-browser__filters{
    display: block;
  }

  .catalog-browser__field{
    min-width: 0;
    margin-bottom: 14px;
  }

  .catalog-browser__buttons{
    gap: 10px;
  }

  .catalog-browser__buttons .btn-page-action{
    width: 100%;
  }

  .catalog-browser__item{
    flex-direction: column;
    align-items: stretch;
  }

  .catalog-browser__item-actions{
    width: 100%;
  }

  .catalog-browser__action-btn,
  .catalog-browser__badge{
    width: 100%;
  }
}

/* Ficha de curso (fichacursoalumno / fichacursopublico / fichacurso ponente y coordinador) */

/* Fila de chips de resumen rápido: ediciones, fechas, horas, modalidades */
.fichacurso__chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-bottom: 18px;
}

.fichacurso__chip{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0,87,81,.08);
  border: 1px solid rgba(0,87,81,.15);
  color: var(--color-secundario);
  font-size: .92rem;
  font-weight: 600;
  white-space: nowrap;
}

.fichacurso__chip .glyphicon{
  font-size: .85rem;
  opacity: .75;
}

/* Variante para la modalidad: tono ligeramente distinto */
.fichacurso__chip--modalidad{
  background: rgba(53,96,148,.07);
  border-color: rgba(53,96,148,.15);
  color: #356094;
}

.fichacurso__body{
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.fichacurso__section{
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding-bottom: 18px;
}

.fichacurso__section:last-child{
  border-bottom: none;
  padding-bottom: 0;
}

.fichacurso__label{
  font-weight: 700;
  color: var(--color-secundario);
  font-size: .95rem;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.fichacurso__text{
  color: #444;
  line-height: 1.65;
  font-size: .97rem;
  white-space: pre-wrap;
}

/* Ayuda y contacto *************************************************************************************/

.help-page__card,
.contact-page__card{
  margin-bottom: 18px;
}

.help-page__lead{
  color: #4f5d68;
  font-size: 1.04rem;
  line-height: 1.65;
  margin-bottom: 22px;
}

.help-page__sections{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px;
}

.help-page__item{
  padding: 16px 18px;
  border: 1px solid rgba(0,87,81,.10);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 18px rgba(20,36,29,.04);
}

.help-page__item-title{
  margin: 0 0 8px;
  color: var(--color-secundario);
  font-size: 1.08rem;
  font-weight: 700;
}

.help-page__item p,
.help-page__content p{
  margin: 0;
  color: #5f6975;
  line-height: 1.6;
}

.help-page__content p + p{
  margin-top: 12px;
}

.help-page__image-wrap{
  margin-top: 20px;
  padding: 16px;
  border: 1px solid rgba(0,87,81,.10);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(247,249,247,.96) 0%, rgba(255,255,255,1) 100%);
}

.help-page__image{
  display: block;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* Alert es la clase que le damos a errores controlados por JS, help es la de Yii por defecto. Damos estilo solo cuando hay error */
.alert-block,
.has-error .help-block {
  display: block;
  margin-top: 6px;
  padding: 8px 10px;
  background: var(--color-alerta-fondo);
  border: 1px solid rgba(0,0,0,.06);
  border-left: 4px solid var(--color-alerta-secundario);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--color-alerta-principal);
}