@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
    * {
        box-sizing: border-box;
    }
    body {
        @apply font-sans bg-white p-4;
    }
    .container {
        @apply max-w-screen-lg mx-auto;
    }
    table {
        @apply border-collapse w-full;
    }
    th, td {
        @apply border border-gray-300 px-4 py-2;
    }
    .btn {
        @apply px-4 py-2 rounded transition-all;
    }
    .btn-primary {
        @apply text-white bg-green-700 hover:bg-green-600;
    }
    input, textarea {
        @apply border border-gray-300 p-2 rounded w-full;
    }
    .input-field:focus {
        @apply ring-2 ring-green-600;
    }
}
@layer components {
    .card {
        @apply bg-white p-5 mt-5 shadow-lg rounded-lg;
    }

    .summary-container {
        @apply flex flex-col items-center w-1/2 mx-auto my-12 p-5 border border-gray-300 rounded-lg shadow-md bg-white;
    }
    .summary-row {
        @apply flex items-center gap-5 p-4 w-full border-b border-gray-200;
    }
    .header {
        @apply text-center bg-white p-8 shadow-md;
    }
    .header h1 {
        @apply text-4xl font-bold;
    }
    /* .footer {
        @apply p-5 text-center bg-green-700 text-white mt-8;
    } */
}
@layer utilities {
    .border-custom {
        @apply border-2 border-green-700 p-4;
    }
    .centered-container {
        @apply flex justify-center items-center h-[70vh] bg-white p-5;
    }
}
@import "menubarmentadark.css";


* {
    box-sizing: border-box;
}
/*
 .btn-primary {
	background-color: var(--primary-color);
	color: white;
}
.btn-primary:hover {
	background-color: var(--secondary-color);
	color: white;
}
    */


:root {
  --logo-mentabase: url("/images/logo.svg");
  /* --icon-down: url("../images/down40.png"); */
  --icon-bacteria: url("../images/bacteria.svg");
  --icon-fungi: url("../images/fungi.svg");
  --icon-seaweed: url("../images/seaweed.svg");
  --icon-virus: url("../images/virus.svg");
  --icon-virus-animal: url("../images/mice.svg");
  --icon-virus-plant: url("../images/virusplant.svg");
}


.input-field {
	border: 1px solid var(--primary-color);
}
.input-field:focus {
	border-color: var(--secondary-color);
	box-shadow: 0 0 0 2px var(--highlight-color);
}
.link {
	color: var(--primary-color);
}
.link:hover {
	color: var(--secondary-color);
	text-decoration: underline;
}
.server-message {
	background-color: var(--secondary-color);
	color: white;
}
body {
    font-family: Arial;
    padding: 10px;
    background: #ffffff;
}
a{
	 color: var(--primary-color);
	 text-decoration: none;
	# padding-left: 10px;
	# padding-right: 10px;
 }
 a:visited{
	color: var(--primary-color);
	text-decoration: none;
	#padding-left: 10px;
	#padding-right: 10px;
}
 a:hover{
	 text-decoration:underline;
	 #font-weight: bold;
	 #padding-left: 7px;
	 #padding-right: 7px;
	 color: #0e4d77;
	 text-shadow: 3px 1px 0px .5px #3b6c48;
 }
input {
		font-size: 1em;
	}

	input:focus {
		border-color: var(--primary-color) !important;
		outline: none;
		box-shadow: 0 0 3px var(--primary-color);
	}



table {
    border-collapse: collapse;
    width: 100%;
}

.datoscepa {
    border-collapse: separate;
    border-spacing: 0 0.5rem;
    width: 100%;
  }
  
  .datoscepa td {
    vertical-align: middle;
  }
  

.datoscepa th,
.datoscepa td {
    padding: 0.5rem 1rem; /* más compacto pero aún cómodo */
    vertical-align: middle; /* centra verticalmente el contenido */
}

.datoscepa tr:nth-child(odd) {
    background-color: #f2f2f2;
}

.datoscepa td:first-child {
    text-align: left;
    font-weight: 500;
    font-size: 1rem;
    padding-right: 1rem;
}


.datoscepa td:first-child label {
    display: inline-block;
    text-align: right;
    width: 100%;
}

.datoscepa td:last-child {
    width: 33%;
}

.datoscepa td span,
.datoscepa td span a {
    display: inline-flex;
    align-items: center;
}

.datoscepa label {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
    font-size: 1rem;
}

textarea {
  width: 100%;
  min-height: 100px;
  resize: vertical;
  margin: 0;
  padding: 2px;
}
.border{
	border: 2px solid var(--primary-color);
	padding: 10px;
	color: var(--primary-color);
}
.border-bottom{
	border-bottom: 2px solid var(--primary-color);
}
.border-top{
	#border-top: 2px solid var(--primary-color);
	border-left: 2px solid var(--primary-color);
	border-right: 2px solid var(--primary-color);
	#border-bottom: 2px solid var(--primary-color);
	#border-top-left-radius: 5px;
	#border-top-right-radius: 5px;
	padding: 5px;
	color: var(--primary-color);
}
.border a{
	text-decoration: none;
	color: var(--primary-color);
}
.border a:visited{
	text-decoration: none;
	color: var(--primary-color);
}
.busqnum {
	padding-top: 5px;
}
.card {
    background-color: white;
    padding: 20px;
    margin-top: 20px;
}
.cat_header {
	color: var(--primary-color);
	font-size: 1.6em;
}
.credits {
	font-size: smaller;
	text-align-last: left;
}
.credits a{
	text-decoration: none;
	color: #fff;
}
.credits a:visited{
	text-decoration: none;
	color: #fff;
}
.credits a:hover{
	text-decoration: underline;
	color: #fff;
}
.cursiva {
	font-style: italic;
}
.derecha {
	float: right;
	padding-right: 0px;
	margin: auto;
}
.div-left{
    float:left;
    padding-left:0px;
}
.div-right{
    float:right;
    padding-right:0px;
}
		#dropdown-menu div {
			display: flex; 
			align-items: center; 
		}
		#dropdown-menu .flag {
			flex-shrink: 0; 
			margin-right: 5px; 
		}
		#dropdown-button  {
			display: flex; 
			align-items: center; 
			min-width: 150px; 
		}


.dttbl {
  color: var(--primary-color);
}

.dttbl tbody tr {
  transition: background-color 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

.dttbl tbody tr:hover {
  background-color: var(--highlight-color);
}

.dttbl tbody tr:hover td {
  color: var(--primary-color);
  font-weight: 500;
}

.dttbl tbody tr:hover a {
  color: var(--primary-color);
  text-decoration: none;
}

.dttbl thead th {
  background-color: var(--highlight-color);
  color: var(--primary-color);
  font-weight: bold;
  text-align: center;
}


.en_US {
    content: '';
    display: inline-block;
    width: clamp(20px, 5vw, 30px);
    height: clamp(20px, 5vw, 30px);
    background-image: var(--icon-en);
    background-size: contain;
    background-repeat: no-repeat;
}
 .errorTxt {
	color: red;
	font-size: 1.1em;
}
 .es_ES {
	background:url(../images/spain32.png) no-repeat;
	width: 32px;
	height: 32px;
	display: inline-block;
	vertical-align: middle;
	margin: 0 0px 0px 0px;;
	border: 0px solid black;
	padding: 14px 16px;
 }
.espcredits {
	font-size: medium;
	a:link {
		color: var(--primary-color);
	}
}
.exit {
	background:url(./images/if_logout_54129_16.png) no-repeat;
	width: 16px;
	height: 16px;
	display: inline-block;
	vertical-align: middle;
	margin: 0 0px 0px 0px;;
	border: 0px solid black;
	padding: 14px 16px;
}
.featable {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; 
    background-color: #f2f2f2;
    color: var(--primary-color);
}
.featable th,
.featable td {
    padding: 8px;
    border: 1px solid #ccc;
    vertical-align: middle; 
    text-align: left; 
    box-sizing: border-box; 
}
.featable th:nth-child(1),
.featable td:nth-child(1) {
    width: 20%;
}
.featable th:nth-child(2),
.featable td:nth-child(2) {
    width: 60%;
}
.featable th:nth-child(3),
.featable td:nth-child(3) {
    width: 20%;
}
.featable td:nth-child(1),
.featable td:nth-child(3) {
    text-align: left;
}
.featable td:nth-child(2) {
    padding: 4px 8px;
}
.featable td:nth-child(2) .contenedor-iconos-valor {
    display: inline-flex;      
    align-items: center;       
    gap: 6px;                   
}
.featable td:nth-child(2) a {
    display: inline-flex;      
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-decoration: none;
}

.featable td:nth-child(2) svg {
    display: block;            
    width: 32px;                
    height: 32px;
}
.featable td:nth-child(2) .valor {
    display: inline-flex;      
    align-items: center;       
    font-weight: bold;
    line-height: 1;            
}
.feat_header {
	color: green;
	font-size: 1.1em;
}
.features {
	color: var(--primary-color);
	font-weight: bold;
	font-size: 18px;
}
.featclass_desc {
	font-size: 1.5rem;
	color:var(--primary-color);
	padding:0;
}

.featclass_desc2 {
	font-size: 1.2rem;
	color:var(--primary-color);
	padding:0;
}

.feather {
  width: 36px;
  height: 36px;
  stroke: var(--primary-color);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  vertical-align: bottom;
}
.feather14top{
		width: 14px;
		height: 14px;
		vertical-align:super;  
}
.feather16middle{
	width: 16px;
	height: 16px;
	vertical-align:middle;  
}
.feather2 {
  stroke: red;
}
.feather3 {
  stroke: var(--primary-color);
}
.feather4 {
	width: 24px;
	height: 24px;
	stroke: var(--primary-color);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
	vertical-align: middle;
}
.feather5{
	stroke: #e6e6e6;
}
.feathersm {
	width: 24px;
	height: 24px;
}
.flag {
    display: inline-block;
    width: 32px; 
    height: 32px; 
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin-right: 8px; 
}
.flag-es {
	background-image: url('/images/es_32.png');
}
.flag-en {
	background-image: url('/images/uk32.png');
}
.flag-fr {
	background-image: url('/images/es_32.png');
}
.flex-container {
	display: flex;
	align-items: stretch;
	background-color: #f1f1f1;
  }
.flex-container > div {
    background-color: white;
    color: var(--primary-color);
    width: 100px;
    margin: 10px;
    padding-left: 10px;
    padding-top: 10px;
    text-align: left;
    line-height: 15px;
    #font-size: 12px;
  }
  .focus-input100::before {
	content: "";
	display: block;
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	-webkit-transition: all 0.4s;
	-o-transition: all 0.4s;
	-moz-transition: all 0.4s;
	transition: all 0.4s;
	background: var(--primary-color);
  }

.form_data {
	padding-left: 10px;
}




/* FORMULARIO BASE - Versión sin fondo por defecto y foco más limpio */

.formulario-base table {
  min-width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}

.formulario-base th {
  background-color: var(--header-bg-color);
  font-weight: 600;
  padding: 0.5rem 1rem;
  text-align: left;
}

.formulario-base td {
  padding: 0.5rem 1rem;
  text-align: left;
}

.formulario-base input[type="text"],
.formulario-base input[type="email"],
.formulario-base input[type="password"],
.formulario-base select,
.formulario-base textarea {
  border: 1px solid var(--secondary-color);
  border-radius: 0.375rem;
  padding: 0.5rem;
  width: 100%;
  max-width: 30rem;
  background-color: transparent; /* SIN fondo por defecto */
  color: var(--primary-color);
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

/* Estilo para selects con clase específica */
.formulario-base select.select-style {
  border: 1px solid var(--secondary-color);
  border-radius: 0.375rem;
  padding: 0.5rem;
  background-color: transparent;
  color: var(--primary-color);
}

/* Foco: fondo visible, sin borde llamativo */
.formulario-base input:focus,
.formulario-base select:focus,
.formulario-base textarea:focus {
  outline: none;
  background-color: var(--soft-color); /* Fondo solo al enfocar */
  border-color: var(--primary-color);  /* Borde suave */
  box-shadow: none;                    /* Sin sombra amarilla */
}

/* Estilo básico para botones */
.formulario-base button:not(.ui-datepicker-trigger) {
  background-color: var(--primary-color);
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.formulario-base button:hover:not(.ui-datepicker-trigger) {
  background-color: var(--secondary-color);
}
/* */
.ui-datepicker-trigger {
  transition: transform 0.2s ease;
}

.ui-datepicker-trigger:hover {
  transform: scale(1.15);
}
/* */
.input-con-icon {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.icono-guardar,
.icono-cancelar {
  cursor: pointer;
  color: var(--primary-color);
  flex-shrink: 0;
}

.icono-notas-grande {
  width: 3rem;   /* 48px */
  height: 3rem;  /* 48px */
  color: var(--primary-color);
}

.icono-notas-grande svg {
  width: 3rem;   /* 32px */
  height: 3rem;
}




/* Contenedor horizontal para acciones (archivos + notas) */
.acciones-inline {
  display: flex;
  align-items: center;
  gap: 8px; /* separa los botones */
}

/* Botón-ícono uniforme (sirve tanto para background-icons como para feather) */
/* .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;   
  height: 2.25rem;
  border-radius: 9999px;
  position: relative;
} */

/* Si dentro del botón hay un <i data-feather>, asegúrate de que se vea */
.btn-icon svg {
  width: 1.1rem;
  height: 1.1rem;
  display: block;
  line-height: 1;
}

/* Badges de contador (ya los usas) */
.btn-icon .badge {
  position: absolute;
  right: -0.25rem;
  bottom: -0.25rem;
  background: var(--primary-color);
  color: #fff;
  font-size: 0.75rem;
  border-radius: 9999px;
  width: 1.25rem;
  height: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}




/* Coloca ESTO DESPUÉS de .btn-icon svg para que gane la cascada */
.btn-icon.icono-notas-grande svg {
  width: 3rem !important;
  height: 3rem !important;
}





.gesticos {
	width:100px;
}
.grow { transition: all .2s ease-in-out; }
.grow:hover { 
	transform: scale(1.3); 
	transform-origin: left bottom;
	transform-style: !important;
}
.header {
    padding: 30px;
    text-align: center;
    background: white;
}
.header h1 {
    font-size: 50px;
}
  .headerlogo2 {
    height: 350px;
    width: 350px;
    background-image: url(../images/loginlogo.png);
	background-position: center;
	background-repeat: no-repeat;
    display: inline-block;
    padding: 100px;
  }
.icon-bar {
    width: 100%;
    background-color: white;
    overflow: auto;
    color: var(--primary-color);
}
.icon-bar a:link, a:visited {
    background-color: white;
    color: grey;
    padding: 4px 10px 4px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
  }
.icon-bar a:hover {
	text-decoration:  overline 2px var(--primary-color);
	color: var(--primary-color);
}
.icon-bar table{
	display: table;
	table-layout: auto;
	width: 200px;
	white-space: nowrap;
}
.izquierda {
	float: left;
	padding-right: 20px;
	margin: auto;
}
.leftmenu{
	font-size: 1.3em;	
}
.leftmenu li{
	margin: 1.1em 0;
}
.letranorm {
	font-size: 15px;
}
.loginlogo {
    height:350px;
    width: 350px;
	background-image: url(../images/cell.svg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
    display: inline-block;
	vertical-align: middle;
	margin: 0px;
	border: 0px solid black;
	padding: 0px;
  }
.logo-container {
	text-align: center;
	margin-bottom: 1.5rem;
}

.logo {
    display: inline-block;
    background-image: var(--icon-home);
    background-size: cover !important;
    background-repeat: no-repeat;
    background-position: center;
}

/* Hacer el logo responsive */
@media (max-width: 640px) {  /* sm */
    .logo {
        width: 8rem;
        height: 8rem;
    }
}
@media (min-width: 640px) {  /* md */
    .logo {
        width: 10rem;
        height: 10rem;
    }
}
@media (min-width: 768px) {  /* lg */
    .logo {
        width: 12rem;
        height: 12rem;
    }
}
@media (min-width: 1024px) { /* xl */
    .logo {
        width: 15rem;
        height: 15rem;
    }
}

@media (min-width: 1280px) { /* xxl */
    .logo {
        width: 20rem;
        height: 20rem;
    }
}

.logout {
	width: 8rem;
	height: 8rem;
}
.logout td{
	width:100px;
}
.mandatory {
	color:red;
}

.menus_ico {
	display: inline-block;
	vertical-align: middle;
	cursor: pointer;
}
    
.miniheader {
	font-size: 1.3em;
}
.modified {
	background-color: #f8f8c2;
}
.msgsalida {
	font-size: 25px;
	font-style: !important;
	text-align: center;
	margin: auto;
    width: 50%;
    border: 3px solid red;
    padding: 30px;
}
.msgsalida a:visited{
	color: green;
}
.mifeat {
	width: 48px;
	height: 48px;
	stroke: var(--secondary-color);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	padding-right: 10px;
	fill: none;
	vertical-align: middle;
}
.nohover a:hover {
	background-color: white;
}
.overflow { height: 200px;}
.primary-bg {
	background-color: var(--primary-color);
}
.restable a{
		color:green;
}
.restable a:hover{
		color:green;
}
.restable a:visited{
	color:green;
}
.right {
    display:block;
	text-align: right;
}
.row:after {
    content: "";
    display: table;
    clear: both;
}
.search_container{
	border:1px solid grey;
	padding-top: 15px;
}
.search_container2{
	border:1px solid grey;
	padding-top: 15px;
	padding-bottom: 15px;
}
.secondary-bg {
	background-color: var(--secondary-color);
}
.separator {
	padding-top: 20px;
}
.small {
	font-size: small;
}
.sortable { list-style-type: none;  padding: 0;  width: 100%; }
.sortable li span { position: absolute; margin-left: -1em; }
span.nobreak {
	white-space: nowrap;
}
.submit {
	background: var(--primary-color);
	color: #fff;
	padding: 5px 10px;
	margin-left: 5px;
	border: none;
	cursor: pointer;
	-moz-transition: background 0.5s;
	-webkit-transition: background 0.5s;
	transition: background 0.5s;
}
.tbl-top th,td {
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
}
 .todo {
	 width:intrinsic;
 }
 .top-bar {
	width: 100%;
	background-color: white;
	overflow: auto;
	color: var(--primary-color);
  }
  .top-bar table{
	display: table;
	table-layout: auto;
	width: 200px;
	white-space: nowrap;
	color: var(--primary-color);
}

/* .tpmo{
    display: inline-block;
    width: 4rem;  
    height: 4rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    vertical-align: middle;
  } */

  .tpmo {
  display: inline-block;
  width: 4rem;    
  height: 4rem;
  flex-shrink: 0; 
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.tpmo_1 { background-image: var(--icon-bacteria); }
.tpmo_2 { background-image: var(--icon-fungi); }
.tpmo_3 { background-image: var(--icon-seaweed); }
.tpmo_4 { background-image: var(--icon-virus); }
.tpmo_5 { background-image: var(--icon-virus-animal); }
.tpmo_6 { background-image: var(--icon-virus-plant); }

.txt2 {
	color:var(--primary-color);
  }
 .txt2 a,a:visited{
	color: var(--primary-color);
	text-decoration: none;
	padding-left: 10px;
	padding-right: 10px;
}
.ui-autocomplete {
   	max-height: 100px;
   	overflow-y: auto;
   	overflow-x: hidden;
   	position: absolute;
}	
* html .ui-autocomplete {
   	height: 100px;
}
.ui-dialog.my-dialog a{
	color: var(--primary-color);
	 text-decoration: none;
	 padding-left: 10px;
	 padding-right: 10px;
}
.ui-dialog.my-dialog a:hover{
	text-decoration:underline;
	color: #0a6524;
	text-shadow: 3px 1px 0px .5px #3b6c48;
}
.ui-dialog.my-dialog a:visited{
	color: var(--primary-color);
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
	background-color: var(--primary-color);
}
.username {
	font-size: medium;
	text-align: right;
}
.ui-widget-header {
	background-color: #f4fbfe;
	border-color: var(--primary-color);
}
.ui-state-default {
	background-color: white;
}
.view{
	stroke:red;
}
.viewOn{
	stroke:grey;
}
table.feat_tbl tr:hover {
    background-color: whitesmoke !important;
}
    fieldset {
      border: 0;
    }
    .overflow {
      height: 200px;
    }
	table.feat_tbl2 td,table.feat_tbl3 td {
    text-align: left;
    padding: 15px;
}
table.feat_tbl2 tr,table.feat_tbl3 tr {
	align-items: stretch;
	border-bottom-color: gray;
	border-radius: 15px;
	border-style: solid;
	border-width: 0.5px;
}
table.feat_tbl2 th,table.feat_tbl3 th {
	background-color: #f2f2f2;
	padding: 15px;
	text-align: left;
}
table.feat_tbl2 td:first-child {
	min-width: 50%;
}
table.feat_tbl2 td:nth-child(2) {
	min-width: 50%;
}
table.feat_tbl2 td:last-child {
	width: 100px;
}
table.feat_tbl input,table.feat_tbl2 input {
  width: 100%;
}



.feat_tbl2{
    table-layout: fixed;
    width: 100%;
    border: 0px;
}

table.feat_tbl2{
    border-collapse:collapse;
}


.red{
    color: red;
}



.feat_tbl2 input[type="text"],
.feat_tbl2 textarea {
border: 1px solid var(--primary-color);
border-radius: 0.375rem; /* rounded-md */
padding: 0.5rem 2.5rem 0.5rem 0.5rem; /* p-2 pr-10 */
width: 100%; /* w-full */
transition: all 0.3s ease-in-out;
}

.feat_tbl2 input[type="text"]:focus,
.feat_tbl2 textarea:focus {
outline: none;
border-color: var(--primary-color);
/*background-color: #f9fefb; /* muy suave, opcional */
background-color:var(--soft-color); /* muy suave, opcional */
box-shadow: 0 0 0 1px var(--primary-color);
}





table.wunits input {
	width: 90%
}
.feat_tbl td{
	height: 50px;
}
.feat_tbl tr:nth-child(even){
	background: #f8f8f8;
}
.rightcolumn {   
    float: left;
    width: 85%;
}
.leftcolumn {
    float: left;
    width: 210px;
    background-color: #ffffff;
    padding-left: 10px;
}
#lock-modal {
  display: none;
  background-color: black;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
}
#loading-circle {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  animation: spin 0.6s ease-in infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}


.modal.is-open {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
  }
  
  .modal__container {
    background-color: white;
    padding: 1.5rem;
    border-radius: 0.5rem;
    max-width: 90%;
    width: 420px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    font-family: sans-serif;
  }
  
  .modal__container.modal-sm { width: 300px; }
  .modal__container.modal-lg { width: 600px; }
  .modal__container.modal-xl { width: 800px; }

#cepamenu {
	font-size: 15px;
	text-align: left;
	margin: auto;
    width: 100%;
    border: 3px solid var(--primary-color);
    padding-left: 30px;
    padding-right: 30px;
    padding-top: 0px;
    /* font-style: !important; */
}


#colename {
	padding-left: 0px;
	font-size: 1.5em;
	color: black;
}
#content {
	width: 100%;
}
#divlogo {
	padding-top: 50px;
}

#secondline {
	width: 100%;
	display: inline-block;
	vertical-align: text-top; 
	padding-top: 5px;
	padding-bottom: 5px;
}
#secondline div{
	display: inline;
	vertical-align: top;
}
#str_cabecera {
	font-size: 23px;
	text-align: left;
	text-shadow: 2px 2px #e7e7e7;
}
#str_cuerpo p {
	padding-bottom: 20px;
}
/* .switch {
	width: 60px;
	height: 30px;
	background-color: var(--primary-color);
	z-index: 0;
	margin: 0;
	padding: 0;
	appearance: none;
	border: none;
	cursor: pointer;
	position: relative;
	border-radius: 30px;
}
.switch:before {
	content: ' ';
	position: absolute;
	left: 3px;
	top: 3px;
	width: 54px;
	height: 24px;
	background-color: white;
	z-index: 1;
	border-radius: 35px;
}
.switch:after {
	content: ' ';
	width: 22px;
	height: 22px;
	border-radius: 40px;
	z-index: 2;
	background: #fff;
	position: absolute;
	transition-duration: 500ms;
	top:4px;
	left: 4px;
	box-shadow: 0 2px 5px #999999;
}
.switchOn, .switchOn:before{
	background: var(--primary-color); !important;
}
.switchOn:after{
	left: 35px;
} */

/* Switch general */
.switch {
  width: 3.5rem;
  height: 2rem;
  border-radius: 1rem;
  background-color: var(--primary-color);
  position: relative;
  cursor: pointer;
  transition: background-color 0.3s ease;
  appearance: none;
  border: none;
}

.switch:after {
  content: '';
  position: absolute;
  top: 0.2rem;
  left: 0.2rem;
  width: 1.6rem;
  height: 1.6rem;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 5px #999;
  transition: left 0.3s ease;
}

.switchOn:after {
  left: 1.7rem;
}

/* Reducción en contexto de iconos */
.iconos-accion .switch {
  width: 2rem;
  height: 1.2rem;
}

.iconos-accion .switch:after {
  width: 1rem;
  height: 1rem;
  top: 0.1rem;
  left: 0.1rem;
}

.iconos-accion .switchOn:after {
  left: 0.9rem;
}



@media screen and (max-width: 800px) {
    .leftcolumn, .rightcolumn {   
        width: 100%;
        padding: 0;
    }
}
@media screen and (max-width: 400px) {
    .topnav a {
        float: none;
        width: 100%;
    }
}
.summary-container {
    display: flex;
    flex-direction: column;
    align-items: center;  
    justify-content: center;  
    width: 50%;  
    margin: 50px auto;  
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background-color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.summary-row {
    display: flex;
    align-items: center;
    gap: 20px;  
    padding: 15px;
    width: 100%;  
    border-bottom: 1px solid #eee;
}
.summary-row:last-child {
    border-bottom: none;
}
.summary-icon {
    width: 95px;
    height: 95px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.summary-icon.users {
    background-image: var(--icon-users);
}
.summary-icon.database {
    background-image: var(--icon-database);
}
.summary-icon.strains {
    background-image: var(--icon-strains);
}
.summary-icon.batches {
    background-image: var(--icon-batches);
}
.summary-icon.controles {
    background-image: var(--icon-controles);
}
.summary-text {
    flex-grow: 1;  
    font-size: 16px;
    color: var(--primary-color);
    line-height: 1.4;
}
.centered-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 70vh; 
    background-color:#fff ; 
    padding: 20px; 
    box-sizing: border-box;
}
.centered-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 180px;
    margin: 20px;
    border: none;
    border-radius: 8px;
    background-color: white;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    text-align: center;
    font-size: 18px;
    color: var(--primary-color);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.centered-button:hover {
    transform: scale(1.1);
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2);
}
.centered-button .summary-icon {
    width: 60px;
    height: 60px;
    background-size: contain;
    background-repeat: no-repeat;
    margin-bottom: 8px;
}
.centered-button.users .summary-icon {
    background-image: var(--icon-users);
}
.centered-button.database .summary-icon {
    background-image: var(--icon-database);
}
.centered-button.strains .summary-icon {
    background-image: var(--icon-strains);
}
.centered-button.batches .summary-icon {
    background-image: var(--icon-batches);
}
.centered-button.controles .summary-icon {
    background-image: var(--icon-controles);
}
@media screen and (max-width: 1000px) {
	#str_cabecera{
		font-size: 15px;
	}
}
@media (max-width: 768px) {
/* === Botones Globales === */
.btn {
    @apply px-4 py-2 rounded transition-all;
}
/*
.btn-primary {
    background-color: var(--primary-color);
    color: white;
}
.btn-primary:hover {
    background-color: var(--secondary-color);
}
*/

.acciones-toggle .arrow-icon { display:inline-flex; align-items:center; }
.acciones-box > span { margin-left:.25rem; }




.lote-row .no-wrap-icons {
  display: flex !important;
  align-items: center !important;
  gap: .35rem !important;
  flex-wrap: nowrap !important;    /* ← no permite saltar de línea */
  overflow-x: auto;                /* ← si no cabe, scroll horizontal */
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;             /* ← por si algún hijo es inline */
  min-width: 0;
}
.lote-row .no-wrap-icons > * {
  flex: 0 0 auto !important;       /* ← ningún hijo se estira ni rompe línea */
}

/* Tablas con ancho mínimo estándar para listados anchos */
.tabla-min { min-width: 720px; }