/*
Theme Name: Angie Benavides Código
Theme URI: https://angiebenavides.com/
Author: Manuel · Joan Creativo (con Claude Cowork)
Description: Tema propio e independiente de angiebenavides.com. No es tema hijo y no necesita Blocksy ni constructores. Las páginas se siguen editando en WordPress (Páginas → bloque «HTML personalizado»); el tema pone el lienzo a ancho completo, el pie del sitio, la plantilla «Página sin pie», y las vistas de entradas, archivos, búsqueda y error 404.
Version: 1.0.7
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 7.4
Text Domain: ab-codigo
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   1. Colores y medidas de la marca (una sola fuente para todo el tema)
   ========================================================================== */
:root {
	--ab-verde: #076951;
	--ab-verde-2: #16876b;
	--ab-texto: #365951;
	--ab-titulos: #192c27;
	--ab-borde: #e7f4f1;
	--ab-pie: #f2f7f6;
	--ab-fondo: #f8fafa;
	--ab-blanco: #ffffff;
	--ab-fuente: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--ab-contenedor: min(1290px, 90vw);
}

@media (max-width: 689.98px) {
	:root { --ab-contenedor: min(1290px, 88vw); }
}

/* ==========================================================================
   2. Base del documento
      Las páginas aprobadas se diseñaron sobre estos valores por defecto
      (los mismos que tenía la web anterior): márgenes, tipografía de títulos,
      etiquetas, campos de formulario y botones. Cambiarlos altera las páginas.
   ========================================================================== */
*, *::before, *::after { outline: none; box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	scroll-behavior: smooth;
}

body, p, h1, h2, h3, h4, h5, h6, em, ol, ul, li, tr, th, td, dl, ins, sub, sup, big, cite, form, small, label, table, figure, button, legend, strike, address, caption, fieldset, blockquote {
	margin: 0;
	padding: 0;
	border: none;
	font: inherit;
}

input, select, textarea { margin: 0; }

body {
	overflow-x: hidden;
	overflow-wrap: break-word;
	background-color: var(--ab-fondo);
	color: var(--ab-texto);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body, h1, h2, h3, h4, h5, h6, label, figcaption {
	font-family: var(--ab-fuente);
	font-size: 16px;
	font-weight: 400;
	font-style: inherit;
	line-height: 1.65;
	letter-spacing: 0em;
	text-transform: none;
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 { color: var(--ab-titulos); font-weight: 700; line-height: 1.5; margin-block-end: calc(.3em + 10px); }
h1 { font-size: 40px; }
h2 { font-size: 35px; }
h3 { font-size: 30px; }
h4 { font-size: 25px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }
h1:where(:last-child), h2:where(:last-child), h3:where(:last-child), h4:where(:last-child), h5:where(:last-child), h6:where(:last-child) { margin-block-end: 0; }
figcaption { font-size: 14px; }

p { margin-block-end: 1.5em; }
ul, ol { padding-inline-start: 2.5em; margin-block-end: 1.5em; }
b, strong { font-weight: bold; }
small { font-size: 80%; }
sup, sub { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
hr { height: 1px; border: none; background-color: var(--ab-borde); }

body ::selection { color: #ffffff; background-color: var(--ab-verde); }

a { color: var(--ab-verde); text-decoration: var(--ab-enlace-decoracion, none); transition: all 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955); }
/* Enlaces dentro de párrafos y listas del contenido: subrayados (como en la web anterior). */
:where(.entry-content :where(p, em, strong) > a, .entry-content :where(ul, ol) a, .wp-block-table a):not(:hover) { --ab-enlace-decoracion: underline; }
a:hover { color: var(--ab-verde-2); }
a:focus, button:focus { outline: none; transition: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ab-verde); outline-offset: var(--outline-offset, 2px); }

img { height: auto; max-width: 100%; vertical-align: middle; }
figure, textarea { display: block; }
audio, canvas, progress, video { display: inline-block; }
embed, iframe, object, video { max-width: 100%; }

table { border-collapse: collapse; border-spacing: 0; empty-cells: show; width: 100%; max-width: 100%; }
table, th, td { border: 1px solid var(--ab-borde); }
th, td { padding: 0.7em 1em; }
th { font-weight: 600; }

/* Formularios */
fieldset { padding: 30px; border: 1px dashed var(--ab-borde); }
legend { font-size: 14px; font-weight: 600; padding: 0 15px; margin-left: -15px; }
label { font-size: 15px; line-height: inherit; cursor: pointer; margin: 0 0 0.5em 0; }
label:last-child { margin-bottom: 0; }

select,
textarea,
input:is([type=url], [type=tel], [type=text], [type=time], [type=date], [type=datetime], [type=datetime-local], [type=email], [type=number], [type=search], [type=password]) {
	appearance: none;
	width: 100%;
	height: 45px;
	font-family: var(--ab-fuente);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ab-texto);
	padding: 0 15px;
	border: 2px solid var(--ab-borde);
	border-radius: 10px;
	background-color: transparent;
	transition: 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	transition-property: color, outline, border-color, background-color;
	outline: 2px solid rgba(0, 0, 0, 0);
	outline-offset: -2px;
}

select:focus,
textarea:focus,
input:is([type=url], [type=tel], [type=text], [type=time], [type=date], [type=datetime], [type=datetime-local], [type=email], [type=number], [type=search], [type=password]):focus {
	color: var(--ab-texto);
	outline-color: var(--ab-verde);
	border-color: var(--ab-verde);
}

select::placeholder,
textarea::placeholder,
input:is([type=url], [type=tel], [type=text], [type=time], [type=date], [type=datetime], [type=datetime-local], [type=email], [type=number], [type=search], [type=password])::placeholder { opacity: 0.7; color: inherit; }

input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
input[type=date] { min-height: 45px; }

select {
	padding-inline-end: 25px;
	background-image: url("data:image/svg+xml,%3Csvg width='21' height='13' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M18.5.379L20.621 2.5 10.5 12.621.379 2.5 2.5.379l8 8z' fill='%234F5D6D' fill-rule='nonzero'/%3E%3C/svg%3E");
	background-repeat: no-repeat, repeat;
	background-size: 8px auto, 100%;
	background-position: right 10px top 50%, 0 0;
}
select option { color: initial; }
textarea { height: 170px; padding: 12px 15px; line-height: 1.5; resize: vertical; }

/* Botones de envío */
[type=submit], .button, .wp-element-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 5px 20px;
	border: none;
	border-radius: 8px;
	appearance: none;
	cursor: pointer;
	user-select: none;
	text-align: center;
	color: #ffffff;
	background-color: var(--ab-verde);
	font-family: var(--ab-fuente);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
	transition: 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);
	transition-property: color, background-color, border-color, opacity, transform;
}
[type=submit]:hover, .button:hover, .wp-element-button:hover { color: #ffffff; background-color: var(--ab-verde-2); }

#main-container { display: flex; flex-direction: column; position: relative; min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px)); }
@media screen and (max-width: 782px) {
	#main-container { min-height: 100vh; } /* En celular la barra de administración se desplaza con la página. */
}
#main { flex: 1 0 auto; outline: none; }

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link:focus {
	clip: auto;
	clip-path: none;
	height: auto;
	width: auto;
	z-index: 100000;
	top: 8px;
	left: 8px;
	padding: 10px 16px;
	background: #ffffff;
	color: var(--ab-verde);
	font-weight: 600;
	border-radius: 8px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.ab-contenedor { width: var(--ab-contenedor); margin-inline: auto; }

/* ==========================================================================
   3. Páginas: lienzo a ancho completo. El diseño de cada página vive en su
      bloque «HTML personalizado» (Páginas → Editar).
   ========================================================================== */
.ab-pagina,
.ab-pagina > .entry-content { display: block; width: 100%; margin: 0; padding: 0; }

/* ==========================================================================
   4. Pie del sitio (mismo aspecto que la web aprobada)
   ========================================================================== */
.ab-pie {
	background-color: var(--ab-pie);
	color: var(--ab-texto);
}

.ab-pie__fila .ab-contenedor {
	display: grid;
	gap: 50px;
	max-width: 1290px;
	padding-block: 25px;
}

.ab-pie__copy {
	margin: 0;
	text-align: center;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.3;
}

@media (max-width: 689.98px) {
	.ab-pie__fila .ab-contenedor { padding-block: 15px; }
}